1.基本情報入力

\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n


名前（姓）
名前（名）
年齢		歳\r\n
メールアドレス
メールアドレス（確認用）
住所1
住所2
建物名等

\r\n

回答率: 85.29%

質問するログイン新規登録

トップ JavaScriptに関する質問

Q&A

解決済

1回答

843閲覧

ドロップダウンリスト０～１３０まで表示したい

tomokia

総合スコア28

0グッド

0クリップ

投稿2021/06/09 08:12

編集2021/06/09 08:39

ドロップダウンリストに０～１３０まで表示したいと思っています。一つずつやると時間が掛かってしまうため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>');
}
}

m.ts10806

2021/06/09 08:27

うまくいかない　で伝わる情報はゼロなので、起きている現象、想定している結果を具体的に記載してください。

m.ts10806

2021/06/09 08:28

というか document.write 使ってるからでは。機能の仕様調べたらすぐ見えそうですが

m.ts10806

2021/06/09 12:31

>onclick="location.href= function option()" 何を見て書いてこうなったのでしょう。

行動規範の内容に同意します

回答1件

ベストアンサー

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

yambejp

総合スコア118164

tomokia

2021/06/09 08:49

コピペしたら動きました。しかし実際になにをしているのかさっぱりなので、恐縮ですが簡単でいいので解説していただけると助かります。

yambejp

2021/06/09 09:02 編集

ちょっと分解してみました（微妙にやってることは違うのですが、だいたいこの流れです） <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>

tomokia

2021/06/10 00:34

親切ご丁寧に対応していただきありがとうございます。

行動規範の内容に同意します