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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

356閲覧

JSループ文で繰り返しコードを出力する方法

pegy

総合スコア243

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/09/06 05:32

編集2018/09/06 05:48

例えば下記のようなHTMLのselect+optionの要素群をappend使用と思った場合でoptionが大量にある場合
ループ処理で記載することは可能なのでしょうか?もちろん以下のようなJavascript文では
Uncaught SyntaxError: Unexpected token forが出力され実行されません。
PHPの感覚ではscript上

<?php for($i=1; $i<4; $i++){echo "<option>".$i}?>といった一文で出力して

簡単にすませてしまうのですが、同じようにJavascript上でも実行する方法をご教示いただきたいです。

因みに、.phpにしてphp上でechoさせれば良いのではというご指摘もあると思いますが、外部のjsファイル(.jsファイル)
で処理したいことを前提でお願いいたします。

HTML

1<select> 2 <option>1 3 <option>2 4 <option>3 5</select>

Javascript

1let opt ='<select>'+for(var i; i<4; i++){'<option>'+i}+'</select>';

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

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

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

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

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

maisumakun

2018/09/06 05:35

特に使っているライブラリはなくて、HTMLは文字列として生成する形でしょうか。
pegy

2018/09/06 05:40

コメントを頂き有難うございます。申し訳ございません、ご指摘について理解が及ばなかったのですが、おそらく仰るとおりかと思います。ライブラリから文字列以外の何かを出力するという具体的な内容が今の私には未だ分かりませんでした。。
guest

回答3

0

selectにnameがなくて、optionにvalueがないですが大丈夫ですか?

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 var s=document.createElement('select'); 4 document.querySelector('#targetarea').appendChild(s); 5 for(var i=1;i<=3;i++){ 6 var o=document.createElement('option'); 7 o.appendChild(document.createTextNode(i.toString())); 8 s.appendChild(o); 9 } 10}); 11</script> 12 13<div id="targetarea"></div>

投稿2018/09/06 05:39

yambejp

総合スコア114581

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

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

pegy

2018/09/06 05:47

yambejp様 コメントを頂きありがとうございます。なるほど、文字列を直接というよりもDOMを操作して繰り返し処 理をさせるのですね。その発想に至りませんでした。 出来るだけ見やすくするために、敢えて削除してsimpleしたのですが改行とインデントがないためにHTMLがとてもみずらかったですね、編集します。 アドバイスに感謝いたします。
guest

0

ベストアンサー

書き方がおかしいと思います
+で使えるのは連結する文字列または足しこむ数字です。
forもiの定義がされていないので1週もすることなく終わります。

js

1let opt ='<select>\n'; 2for(var i=0; i<4; i++){ 3 opt +='<option>'+i+'</option>\n'; 4} 5opt +='</select>';

投稿2018/09/06 05:39

編集2018/09/06 05:53
m.ts10806

総合スコア80765

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

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

m.ts10806

2018/09/06 05:45

あとはhtmlに入れるだけです。 入れたい箇所に向けてappend。 yambejpさんのようにエレメント生成された方が間違いはないですね
pegy

2018/09/06 05:56

mts10806様 var i=0の定義については失礼いたしました。タイポでした。 また、ご提示のコードについては、、正直なるほど!という目からうろこでした。 個人的にはとても勉強になって感動しているのですが、初歩的な質問でそんなことを聞くな!って内容であったら本当に申し訳ございません。 いずれにしても解決することができあました。御礼申し上げます。
m.ts10806

2018/09/06 05:59

この回答で書いたコードは書き方のひとつですし、「HTMLを扱う」のであればDOM操作の方が適切であるということをご理解いただきたく、コメントをつけました。 私の今回の回答はあくまで質問者さんのコードを訂正しただけであり、「最適かどうか」という観点は含まれていないことは頭に入れておいてください。
pegy

2018/09/06 06:16 編集

申し訳ございませんが、「DOM操作のほうが適切である」という点について少しぴんとこないのです。コードとしてはmts10806様ご提示の要素を直接加筆していくほうが単純で素人の私には直感的にも理解しやすいのですがDOMを操作するほうが適切というのは何故でしょうか?直接ご提示の要素を$('body').append(opt)しても問題になりそうな点(適切ではない点)が思い浮かばないのですが。。
m.ts10806

2018/09/06 06:22

直感的で分かりやすいという点は見た目なので、そこは同意する部分もあるのですが、あくまで最適かどうかの話です。 例えばそのDOMに何かしらのイベントを追加したりCSSをあてたりすることになったらどうでしょうか? createElementないしjQueryであれば$(タグ名)で生成した方がスッキリと間違いなく書けます。 表現は長くなればなるほど間違いが出やすくなります。 短く書けて同じ効果ならその方が効率もよくなり、結果読みやすくなります。 扱うエレメントの量が増えればそれだけコードが長くなってしまいますしね。
pegy

2018/09/06 07:04

なるほど、そのような趣旨であれば理解することができました。 重ねてお手数をお掛けし申し訳ございませんでした。 改めて、有難うございました!
m.ts10806

2018/09/06 07:10

ちょっと説明足りてませんでしたね。失礼しました。 理解につながったようで何よりです。
guest

0

HTML

1<select><script src="hoge.js"></script></select>

JavaScript

1 const select = document.scripts[document.scripts.length - 1].parentElement; 2 for (let i = 1; i < 4; i++) { 3 select.add(new Option(i.toString(), i.toString())); 4 }

投稿2018/09/06 06:14

x_x

総合スコア13749

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

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

pegy

2018/09/06 07:14

x_x様 コメント有難うございます。 かなりすっきりコードですね。正直に申し上げますと、scripts[]の記法(大括弧は配列生成用のリテラルとしか学んだことがないので)やOptionクラスを初めてみるので、時間をかけて調べてみようと思います。
pegy

2018/09/06 07:25

調べたら、scripts[n]は、ただの配列でscript要素をHTMLCollectionのn番目のものを返しているだけでした。。失礼いたしました。プロパティもdocumentオブジェクトにはあるのですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問