回答編集履歴
2
追記1.1
answer
CHANGED
|
@@ -113,4 +113,26 @@
|
|
|
113
113
|
|
|
114
114
|
みたいに簡略化できる。
|
|
115
115
|
|
|
116
|
-
もっといい方法があるのかもしれませんが、私ならこういう風にするかなぁ。
|
|
116
|
+
もっといい方法があるのかもしれませんが、私ならこういう風にするかなぁ。
|
|
117
|
+
|
|
118
|
+
追記:
|
|
119
|
+
あ、忘れていた...
|
|
120
|
+
呼び出し側である、<input type="button" value="-" onClick="count_down_btn3()"></input> では、
|
|
121
|
+
|
|
122
|
+
count_down_btn3関数じゃなくて、pushButton関数を呼び出してください。
|
|
123
|
+
|
|
124
|
+
例:
|
|
125
|
+
|
|
126
|
+
```JavaScript
|
|
127
|
+
<input type="button" value="-" onClick="pushButton('three')"></input>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
すると、
|
|
131
|
+
|
|
132
|
+
関数Aが関数Bを呼び出している...みたいな体で書くと、
|
|
133
|
+
|
|
134
|
+
pushButton( "three" );
|
|
135
|
+
みたいになる。
|
|
136
|
+
|
|
137
|
+
後から考えると、countDown_pushButton( "three" ); countUp_pushButton( "three" ); とかに分離してもいいかなぁ。
|
|
138
|
+
(大雑把な考え方は一緒)
|
1
追記1
answer
CHANGED
|
@@ -2,4 +2,115 @@
|
|
|
2
2
|
失礼ですが、質問にあるサンプル、自分なりにやったものでしょうか。
|
|
3
3
|
たまに切り貼りしただけの、全く理解すらしていない(そもそもJavaScriptって何?おいしいの?っていうレベルだったり)場合があります。
|
|
4
4
|
|
|
5
|
-
知識レベルに応じた説明があるので、できるだけ「どこまで理解できたのか」「どこが不明瞭なのか」を記述しすると説明しやすいです。
|
|
5
|
+
知識レベルに応じた説明があるので、できるだけ「どこまで理解できたのか」「どこが不明瞭なのか」を記述しすると説明しやすいです。
|
|
6
|
+
|
|
7
|
+
--------------
|
|
8
|
+
[追記1]
|
|
9
|
+
|
|
10
|
+
> サンプルソースは自分で作成したものになります。
|
|
11
|
+
|
|
12
|
+
Okです。関数の組み方は...ご存じですよね?
|
|
13
|
+
わからないのなら、入門書(または入門サイト)をお読みください。
|
|
14
|
+
まずは基礎ができていないと無理ですから。
|
|
15
|
+
|
|
16
|
+
ボタンの数が多く、できるだけ汎用性を持たせた関数を作成したいということですよね。
|
|
17
|
+
|
|
18
|
+
まず、基本的な部分を考えてみましょう。
|
|
19
|
+
|
|
20
|
+
```JavaScript
|
|
21
|
+
function count_up_btn1(){
|
|
22
|
+
//カウンタに 1 を加算
|
|
23
|
+
document.getElementById( "one" ).innerHTML = ++one;
|
|
24
|
+
document.getElementById( "total" ).innerHTML = ++total;
|
|
25
|
+
}
|
|
26
|
+
function count_down_btn1(){
|
|
27
|
+
//カウンタから 1 を減算
|
|
28
|
+
document.getElementById( "one" ).innerHTML = --one;
|
|
29
|
+
document.getElementById( "total" ).innerHTML = --total;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function count_up_btn2(){
|
|
33
|
+
//カウンタに 1 を加算
|
|
34
|
+
document.getElementById( "two" ).innerHTML = ++two;
|
|
35
|
+
document.getElementById( "total" ).innerHTML = ++total;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function count_down_btn2(){
|
|
39
|
+
//カウンタから 1 を減算
|
|
40
|
+
document.getElementById( "two" ).innerHTML = --two;
|
|
41
|
+
document.getElementById( "total" ).innerHTML = --total;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
function count_up_btn3(){
|
|
45
|
+
//カウンタに 1 を加算
|
|
46
|
+
document.getElementById( "three" ).innerHTML = ++three;
|
|
47
|
+
document.getElementById( "total" ).innerHTML = ++total;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function count_down_btn3(){
|
|
51
|
+
//カウンタから 1 を減算
|
|
52
|
+
document.getElementById( "three" ).innerHTML = --three;
|
|
53
|
+
document.getElementById( "total" ).innerHTML = --total;
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
がやりたいこと(最終的に行いたいこと)ですよね。
|
|
57
|
+
|
|
58
|
+
共通部分を見ると、
|
|
59
|
+
|
|
60
|
+
常に id が"one", "two", "tree" のどれかをインクリメント( ++oneとか )やデクリメント ( --one とか ) して、id がtotal のエリアを インクリメントまたはデクリメントしていますね。
|
|
61
|
+
|
|
62
|
+
つまり、共通項だけをまとめて書くと
|
|
63
|
+
|
|
64
|
+
```ここに言語を入力
|
|
65
|
+
// ただし<..> とあるのは何かしらの変数または定数だとして
|
|
66
|
+
document.getElementById( <ID> ).innerHTML = <増減>;
|
|
67
|
+
document.getElementById( "total" ).innerHTML = <増減>;
|
|
68
|
+
```
|
|
69
|
+
ですよね。
|
|
70
|
+
|
|
71
|
+
それなら、単純にこの式をコード化すればいいかと思います。
|
|
72
|
+
|
|
73
|
+
ただし、<ID> と<増減>だけが不定。
|
|
74
|
+
それなら、これを管理する関数 を作って、これに管理させる。
|
|
75
|
+
|
|
76
|
+
ただ、私の書き方ですと、プロトタイプっていう、ほかの言語だとクラス...を変化させたようなものを使う必要があるので、関数で結構です。
|
|
77
|
+
ヒント: [プロトタイプ JavaScript](https://qiita.com/howdy39/items/35729490b024ca295d6c)
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
```JavaScript
|
|
81
|
+
// プロトタイプ NumberManagerを定義
|
|
82
|
+
|
|
83
|
+
function calcNumberWithId(id){
|
|
84
|
+
// 仮に "one"のときは減算で "two"なら加算すると仮定
|
|
85
|
+
if( id == "one" ){
|
|
86
|
+
// ここで one をインクリメントする
|
|
87
|
+
// あと total も
|
|
88
|
+
return one;
|
|
89
|
+
}else if( id == "two" ){
|
|
90
|
+
// ここでtwo をデクリメントする
|
|
91
|
+
// あと total も
|
|
92
|
+
return two;
|
|
93
|
+
}
|
|
94
|
+
// 処理されなかった...
|
|
95
|
+
return undefined;
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
みたいにしておけば、
|
|
100
|
+
|
|
101
|
+
グローバルエリアとかでNumberManagerのインスタンスを生成しておいて、
|
|
102
|
+
|
|
103
|
+
```JavaScript
|
|
104
|
+
// ただし<..> とあるのは何かしらの変数または定数だとして
|
|
105
|
+
// また numberManager は NumberManagerのオブジェクトだとして
|
|
106
|
+
function pushButton( id ){
|
|
107
|
+
// 関数calcNumberWithIdを介して操作し、戻り値のnumを設定する
|
|
108
|
+
var num = calcNumberWithId(id);
|
|
109
|
+
document.getElementById( id ).innerHTML = num;
|
|
110
|
+
document.getElementById( "total" ).innerHTML = total;
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
みたいに簡略化できる。
|
|
115
|
+
|
|
116
|
+
もっといい方法があるのかもしれませんが、私ならこういう風にするかなぁ。
|