こんにちは。
ご質問に挙げられているコードをもとに、以下の諸点を追加、修正しました。
- ボタンのクリックハンドラを
onclick="addInputArea();"
のように書かず、javascript のコードから addEventListener
で設定する。???? 控えめなJavaScript の 「動作とマークアップの分離」の項、参照
<input>
を囲む <div>
に class="input-wrapper"
を設定して、これを削除時に使う。
id="inputArea"
の<div>
を取得する変数名を inputArea
に修正
<input>
の数が 1個のとき、"ー"ボタンをクリックできないようにする。
<input>
の数が 5個のとき、"+"ボタンをクリックできないようにする。
- 変数名を camelcase に統一
上記を行ったHTMLとjavascript が以下です。
html
1<div>
2 <input type="text" maxlength="80">
3 <button id="add-button">+</button>
4 <button id="delete-button" disabled>-</button>
5</div>
6
7<div id="inputArea">
8</div>
javascript
1var addButton = document.getElementById('add-button');
2var deleteButton = document.getElementById('delete-button');
3
4addButton.addEventListener('click', addInputArea);
5deleteButton.addEventListener('click', deleteInputArea);
6
7function addInputArea() {
8 // 追加する要素の作成
9 var divElement = document.createElement("div");
10 divElement.innerHTML = '<input type="text" maxlength="80">';
11 divElement.className = 'input-wrapper';
12
13 // 要素の追加
14 var inputArea = document.getElementById("inputArea");
15 inputArea.appendChild(divElement);
16
17 // 追加後の input の個数
18 var inputsCount = document.getElementsByTagName('input').length;
19 if (inputsCount == 5) { //5個の場合、+をクリックできなくする
20 addButton.disabled = true;
21 } else if (inputsCount == 2) {
22 deleteButton.disabled = false; // - をクリックできるようにする
23 }
24}
25
26function deleteInputArea() {
27 // div.input-wrapper を取得
28 var inputDivs = document.getElementsByClassName('input-wrapper');
29
30 // 最後の div.input-wrapper を削除
31 var inputArea = document.getElementById("inputArea");
32 inputArea.removeChild(inputDivs[inputDivs.length-1]);
33
34 // 削除後の input の個数を取得
35 var inputsCount = document.getElementsByTagName('input').length;
36 if (inputsCount == 4) {
37 addButton.disabled = false; // + をクリックできるようにする。
38 } else if (inputsCount == 1) {
39 deleteButton.disabled = true; // - をクリックできないようにする。
40 }
41}
以下に、上記のコードと同じものを上げておきましたので、お試しください。
参考になれば幸いです。
追記
「+」、「−」ボタンに設定するクリックハンドラを各々に対して個別に用意するのではなく、一つの関数を両方のボタンのクリックハンドラにすることもできます。
以下その例です。
html
1<div>
2 <input type="text" maxlength="80">
3 <button name="append">+</button>
4 <button name="remove" disabled>-</button>
5</div>
6
7<div id="inputArea">
8</div>
javascript
1var buttons = document.getElementsByTagName('button');
2Array.prototype.forEach.call(buttons, function(button, i) {
3 button.addEventListener('click', buttonClicked);
4});
5
6function buttonClicked(e) {
7
8 // 追加または削除する div を作成または取得
9 var divElement = null;
10
11 if (e.target.name == 'append') {
12 divElement = document.createElement("div");
13 divElement.innerHTML = '<input type="text" maxlength="80">';
14 divElement.className = 'input-wrapper';
15 } else if (e.target.name == 'remove') {
16 var inputDivs = document.getElementsByClassName('input-wrapper');
17 divElement = inputDivs[inputDivs.length-1];
18 }
19
20 // 要素の追加または削除
21 if (divElement) {
22 var inputArea = document.getElementById("inputArea");
23 inputArea[`${e.target.name}Child`](divElement);
24 }
25
26 // 追加後の input の個数によってボタンの disabled を設定、解除
27 var inputsCount = document.getElementsByTagName('input').length;
28 switch (inputsCount) {
29 case 5:
30 if (e.target.name == 'append')
31 buttons[0].disabled = true;
32 break;
33 case 4:
34 if (e.target.name == 'remove')
35 buttons[0].disabled = false;
36 break;
37 case 2:
38 if (e.target.name == 'append')
39 buttons[1].disabled = false;
40 break;
41 case 1:
42 if (e.target.name == 'remove')
43 buttons[1].disabled = true;
44 break;
45 }
46}
47
48
49
以下に、上記のコードと同じものを上げておきましたので、お試しください。
追記2
ご質問の主旨からやや外れるかもしれませんが、以下、補足します。
ご質問に
しかし、ほかにもっと便利な方法があればそれでもかまいません。
とありましたが、「便利な道具を利用した方法」も "便利な方法" に含まれるとすれば、以下のように JQuery を使うことも考えられます。