Q&A
うまくいかない で伝わる情報はゼロなので、起きている現象、想定している結果
を具体的に記載してください。
ドロップダウンリストに０～１３０まで表示したいと思っています。一つずつやると時間が掛かってしまうためfor文で処理したく書いてみたが、表示されず真っ白の画面に１２９の行だけがある状態になってしまいます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="input1.css"> <script type="text/javascript" src="input1.js" charset="shift_jis"></script> </head> <h2>1.基本情報入力</h2> <main> <table> <tr> <th>名前（姓）</th> <td><input id="name1" ></td> </tr> <tr> <th>名前（名）</th> <td><input id="name2" ></td> </tr> <tr> <th>年齢</th> <td><select name="age" id="age"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option></th><th>歳</td> </tr> <tr> <th>メールアドレス</th> <td><input id="add1" ></td> </tr> <tr> <th>メールアドレス<br>（確認用）</th> <td ><input id="add2" ></td> </tr> <tr> <th>住所1</th> <td><input id="sumika1" ></td> </tr> <tr> <th>住所2</th> <td><input id="sumika2" ></td> </tr> <tr> <th>建物名等</th> <td><input id="build" ></td> </tr> <tr> <th></th> <th> <button onclick="location.href= function option()" >次へ</button></th> </tr> </table> </main> </container> </html>
window.onload = function option() { var select = document.getElementById("age"); var option = document.createElement("option"); age.appendChild(option); for(var i=0; i<130; i++){ document.write('<option value="'+i+'">'+i+'</option>'); } }
というか
document.write
使ってるからでは。
機能の仕様調べたらすぐ見えそうですが
>onclick="location.href= function option()"
何を見て書いてこうなったのでしょう。
回答1件
0
ベストアンサー
javascript
1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 Array(131).fill(null).forEach((_,x)=>{ 4 document.querySelector('#age').appendChild(Object.assign(document.createElement('option'),{value:x,textContent:x})); 5 }); 6}); 7</script> 8<select name="age" id="age"></select>
投稿2021/06/09 08:41
総合スコア116724
コピペしたら動きました。しかし実際になにをしているのかさっぱりなので、恐縮ですが簡単でいいので解説していただけると助かります。
ちょっと分解してみました
（微妙にやってることは違うのですが、だいたいこの流れです）
<script>
window.addEventListener('DOMContentLoaded', ()=>{
var arr=Array(131).fill(null).map((_,x)=>x);
console.log(arr);//0-130がつまった配列
arr.forEach(x=>{ //順番に取り出してxにわたす
let opt=document.createElement('option');//optionタグをつくり
opt=Object.assign(opt,{value:x,textContent:x})//valueにx、テキストにxを設定
document.querySelector('#age').appendChild(opt);//id=ageの要素に追加する
});
});
</script>
<select name="age" id="age"></select>
親切ご丁寧に対応していただきありがとうございます。
あなたの回答
tips
プレビュー
