質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

12166閲覧

要素を追加、削除できるボタン

flyingHigh

総合スコア41

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

3クリップ

投稿2018/09/30 15:39

編集2018/10/01 04:12

+ボタンをクリックして入力フォームを増やす、
ーボタンを押して入力フォームを減らす機能を実現したいです。
ーボタンを何度押しても、入力フォームは少なくとも1つは表示され、
+ボタンを何度押しても最大5つまで増やせる。

下記のソースで実現しようと試みています。
しかし、ほかにもっと便利な方法があればそれでもかまいません。
ご教授ください。よろしくお願いいたします。

追記:
現状は「5つまで」は未実装
-ボタンの機能も未実装です。
この2点の記述方法がわかりません。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5</head> 6 7<body> 8 9<div> 10 <input type="text" maxlength="80"> 11<button onclick="addInputArea();">+</button> 12 <button onclick="deleteInputArea();">-</button> 13</div> 14 15<div id="inputArea"> 16</div> 17 18</body> 19</html>

CSS

1input{ 2 border-radius:4px; 3 box-shadow:0; 4 border:1px solid #ccc; 5} 6#inputArea{ 7 display:inline-block; 8}

javascript

1function addInputArea() 2{ 3 var div_element = document.createElement("div"); 4 div_element.innerHTML = '<input type="text" maxlength="80">'; 5 var parent_object = document.getElementById("inputArea"); 6 parent_object.appendChild(div_element); 7} 8 9function deleteInputArea() 10{ 11 document.createElement("div"); 12 div_element.innerHTML = '<input type="text" maxlength="80">'; 13 14 var parent_object = document.getElementById("inputArea"); 15 parent_object.removeChild(div_element); 16}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/09/30 16:53

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
m.ts10806

2018/10/01 00:17

「コード」って実際に入っていたら動かないので、コードブロック内にはコードだけを入れるようにしてください。
m.ts10806

2018/10/01 00:22

「5つまで」は未実装ですよね?
m.ts10806

2018/10/01 01:43

履歴の「編集要項」のところではなく質問本文に追記しないと大事な内容が目につきませんよ。
guest

回答3

0

こんにちは。

ご質問に挙げられているコードをもとに、以下の諸点を追加、修正しました。

  • ボタンのクリックハンドラを 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 を使うことも考えられます。

投稿2018/09/30 17:30

編集2018/10/02 23:09
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

flyingHigh

2018/10/09 15:50

ありがとうございます。 jquery使用したこちらのほうがわかりやすいですね。 ちょうど、この延長で質問したい部分があるので、 新規で質問しようと思っています。 また、お答えくださるとありがたいです。
guest

0

ベストアンサー

こんな感じですがnameをつけないとsubmitしても無効なのでもうすこし詰めたほうがよいでしょう

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(){ 3 document.querySelector('#add').addEventListener('click',function(){ 4 if(document.querySelectorAll('#inputArea input').length<5){; 5 var l=document.querySelector('#inputArea input:last-of-type'); 6 document.querySelector('#inputArea').insertBefore(l.cloneNode(),l.nextSibling); 7 } 8 }); 9 document.querySelector('#del').addEventListener('click',function(){ 10 if(document.querySelectorAll('#inputArea input').length>1){; 11 var l=document.querySelector('#inputArea input:last-of-type'); 12 document.querySelector('#inputArea').removeChild(l); 13 } 14 }); 15}); 16</script> 17<div id="inputArea"> 18<input type="text" maxlength="80"> 19<button id="add">+</button> 20<button id="del">-</button> 21</div>

蛇足

共通部分があるのでまとめられるかなぁと思ったらイマイチ効率化できなかったソース

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(){ 3 [].forEach.call(document.querySelectorAll('#add,#del'),function(x){ 4 x.addEventListener('click',function(){ 5 var len=document.querySelectorAll('#inputArea input').length; 6 var node=document.querySelector('#inputArea input:last-of-type'); 7 var xid=x.getAttribute('id'); 8 var area=document.querySelector('#inputArea'); 9 if(xid==="add" && len<5){ 10 area.insertBefore(node.cloneNode(),node.nextSibling); 11 } 12 if(xid==="del" && len>1){ 13 area.removeChild(node); 14 } 15 }); 16 }); 17}); 18</script> 19<div id="inputArea"> 20<input type="text" maxlength="80"> 21<button id="add">+</button> 22<button id="del">-</button> 23</div>

投稿2018/10/01 00:36

編集2018/10/01 01:28
yambejp

総合スコア114574

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

flyingHigh

2018/10/09 15:52

jQueryなしだとこのようになるのですね。 非常に勉強になります、ありがとうございます。
guest

0

  • inputにnameがないのでフォーム送信して受け取るときに正しく受け取れないはずです。

識別のためにname=textX (Xは連番)でも良いので用途にそったものをつけましょう。

  • divをcreateElementするならinputもcreateElementされた方が記法の統一性が高まります。

投稿2018/10/01 00:21

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問