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

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

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

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

Q&A

解決済

3回答

3033閲覧

js 追加ボタンに上限を設定したい

earnest_gay

総合スコア615

JavaScript

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

0グッド

0クリップ

投稿2016/06/21 02:59

下記のエレメントを追加するjsなのですが、10個以上追加できないようにするには、
どう工夫したらよろしいでしょうか...?

<script type="text/javascript"> /*スキルエリアのセレクトボックスセットのクローン*/ function skill_selectAdd(){ var get = document.getElementById("skill_select"); var set = get.cloneNode(true); var target = document.getElementById("skill_selectAdd"); var btn_delete = document.getElementById("skill_select_btnDel"); set.id= "test" + target.children.length;//idの重複を防ぐため、連番をつけておく target.parentNode.insertBefore(set, target); btn_delete.disabled = false; } /*スキルエリアのセレクトボックスセットの削除*/ function skill_selectDel(){ var targets = document.getElementsByClassName("skill_select"); var btn_delete = document.getElementById("skill_select_btnDel"); if (targets.length === 2) { btn_delete.disabled = true; } targets[1].parentNode.removeChild(targets[targets.length - 1]);//最後の要素を削除 } </script> <tr id="skill_select" class="skill_select"> <td> <select name="programs1_[]"> <?php echo Programmerskill::getSkill(); ?> </select> </td> <td> <select name="programs_year1_[]"> <?php echo Skillyear::getYear(); ?> </select> </td> </tr> <tr id="skill_selectAdd"> <td colspan="2"> <input type="button" value="追加" onClick="skill_selectAdd()"> <input type="button" value="削除" onClick="skill_selectDel()" id="skill_select_btnDel" disabled="true"> </td> </tr>

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

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

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

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

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

guest

回答3

0

ベストアンサー

tr.parentNode.rows.lengthdocument.querySelestorAll('td[id^=test]') でtr要素ノードの数を参照できるので、そこで判定してみてください。


他に下記問題があります。

function skill_selectAdd<tr id="skill_select" class="skill_select">で名前が重複しているので名前を変えてください。 状況によってはTypeError` になります。


[追加] すると <tr id="test1" class="skill_select"> が増殖します(idがtest1のまま変わらない)。indexを付けるなら tr.parentNode.rows.length です。

Re: rento さん

投稿2016/06/21 03:23

編集2016/06/21 04:02
think49

総合スコア18156

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

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

earnest_gay

2016/06/21 23:29

回答ありがとうございます。 上限を超えているようであれば追加させないというのは言葉では分かるのですが、それを実現させるための記述となるとどう記述してよいかで止まっています...
think49

2016/06/22 06:02 編集

申し訳ないのですが、私は「rento さんが何をわからないでいるのか」を理解できていません。 「実現するための記述」でわからない部分はどこでしょうか。 分からない内容を具体化してみてください。 https://teratail.com/help/question-tips#questionTips2
guest

0

ドロップダウン数を管理する var selectCnt = 0; のような変数を用意して、

ドロップダウンを追加したら selectCnt += 1;
ドロップダウンを削除したら selectCnt -= 1;

などのように増減する。

ドロップダウンを追加しようとした際に「ドロップダウン数が10以上かどうか」をチェックして、
上限を超えているようであれば追加させない、のようにすると良いのではないでしょうか。


・・・と、リロードしたら他の方の回答が付いてました。

すいません ちょっと元ソースちゃんと読みます。

function skill_selectAdd(){ var get = document.getElementById("skill_select"); //★ <tr id="skill_select"> を取る var set = get.cloneNode(true); //★ それをコピーする var target = document.getElementById("skill_selectAdd"); //★ それとは別に <tr id="skill_selectAdd"> を取る var btn_delete = document.getElementById("skill_select_btnDel"); //★ button id="skill_select_btnDel" を取る set.id= "test" + target.children.length;//idの重複を防ぐため、連番をつけておく //★ 「コピーしたtr」にidをつける target.parentNode.insertBefore(set, target); //★ target の親に「コピーしたtr」を追加 btn_delete.disabled = false; //★削除ボタンを有効化 }

えーっと

<tr id="skill_select"> をコピーして、 <tr id="skill_selectAdd"> の兄弟要素として追加してる、んですかね。 じゃあ <tr id="skill_selectAdd"> の children.length 取ってもダメか。 (てかそれだとそもそも "idの重複を防ぐため、連番をつけておく" の部分も間違いです?)

うーん、tr の parentNode から tr 数を取って、
追加&削除ボタンの tr はカウント対象外だから -1 して・・・とかもできますけど
私だったらドロップダウン用の tr に それ用の class を指定して、それでカウントしますかねえ・・・
(それか最初に書いたカウント用変数を使う版ですけど・・・でも class かなあ)

# すいません 脊髄反射で回答してしまって・・・

投稿2016/06/21 03:21

編集2016/06/21 04:03
sk_3122

総合スコア1126

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

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

earnest_gay

2016/06/21 23:28

回答ありがとうございます。 いまだにどうすればよいか分からずです...
sk_3122

2016/06/22 00:59

前提として、javascriptのソースは読めますか? ここは 「プログラムは分からないけど、そのままコピペすれば動くよっていうコードが欲しい」 みたいな依頼をするところじゃなくて、 「自分でコードを書いてみたけど分からない部分がある」 みたいなのを質問するところです。 もし前者だとすると、違うところで質問した方が良いかもしれません。 (ここでは回答がつかなかったり、マイナス評価がついたりします) もし丸コピを求めているわけではないのであれば、 どこまで分かって、どこが分からないのかを書くと良いと思います。 カウントの取り方をこう書いてみたけど取れない、 こう書いてみたけど意図通りにならない、 みたいな。
guest

0

Javascript

1set.id= "test" + target.children.length;//idの重複を防ぐため、連番をつけておく

この行でいま何個selectに要素があるか参照できてるじゃないですか。
あとはこれを使ってifで10個以上なら追加しないようにするだけです。

投稿2016/06/21 03:13

masaya_ohashi

総合スコア9206

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

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

think49

2016/06/21 03:25

実際に書いてみるとわかりますが、追加しているのはtr要素ノードです。 対して、target.children.length はtr要素ノードの子要素ノード郡なので常に1となります。 https://jsfiddle.net/z946L8cr/1/
masaya_ohashi

2016/06/21 03:53

騙された…そのとおりですね。
earnest_gay

2016/06/21 23:27

回答ありがとうございます。 こちらは理解に時間がかかりそうで返事が遅れましたが どう実装すればよいかわからずです...
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問