formのselectで選択した値をdivタグのinnerHTMLでbodyに追記したいです

前提・実現したいこと

javascriptでformのselectで選択した値をdivタグのinnerHTMLでbodyに追記したいです

発生している問題・エラーメッセージ

クリックボタンを押してもdivタグが追加されません

該当のソースコード

javascript
1<html>
2    <meta charset="UTF-8">
3<head>
4    <script type="text/javascript">
5        window.onload=function(){
6            document.getElementById("button").onclick=function(){
7                for(var i=0; i>select.length; i++);
8                    if(select[i].selected){
9                        var name=document.getElementById("select").value;
10                        var value=document.createElement("div");
11                        value.innerHTML="name";
12                        document.body.appendChild(value);
13                    };
14                };
15            };
16    </script>
17</head>
18    <body>
19        <form>
20            <select id="select" multiple="multiple">
21                <option value="雪">雪</option>
22                <option value="月">月</option>
23                <option value="花">花</option>
24            </select>
25            <button id="button">クリック</button>
26        </form>
27    </body>
28    </html>

試したこと

var name=document.getElementById("select").value;
の後にdocument.write(name);を記述したら、nameの値はきちんと取得されていました。
divタグ追加の部分に問題があるように思いますが、いかがでしょうか。

補足情報（FW/ツールのバージョンなど）

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

回答2件

ベストアンサー

<button>はデフォルトでtype="submit"なので、ボタンを押したあとにページ遷移してしまっているということが考えられます。

明示的にtype="button"を指定しましょう。

投稿2020/05/29 06:14

maisumakun

総合スコア146018

退会済みユーザー

2020/05/29 06:26

ご回答ありがとうございます！ type="button"を指定したところ、divが生成されました！ただ、innerHTMLの部分が「name」になってしまい、選択された「雪」「月」「花」のどれにもなりません。また、ループができていないようで、複数選択をしても1つしかdivが生成されません。選択された「雪」「月」「花」が表示されるようにするには、どういった修正が必要でしょうか

maisumakun

2020/05/29 06:29

value.innerHTML="name";と代入しているので、「name」にしかならないです。

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

type="button"が不足しているのでは。

HTML
1<button id="button" type="button">クリック</button>

【<button>: ボタン要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/button#attr-type

submit: 自身が属するフォームのデータをサーバーに送信するボタンとなります。これは type 属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合の既定の動作です。

追記：

JavaScript
1window.onload=function(){
2  document.getElementById("button").onclick=function(){
3  //for(var i=0; i>select.length; i++);// ←終了している
4  //               ↓
5    for(var i=0; i < select.length; i++) {
6    if(select[i].selected){
7      var name=document.getElementById("select").value;
8      var value=document.createElement("div");
9    //value.innerHTML="name";
10    //                   ↓ 変数は引用符をつけたらただの文字列
11        value.innerHTML=name;
12      document.body.appendChild(value);
13    };
14    }; // forの閉じ{}
15  };
16};
17```**動くサンプル：**[https://jsfiddle.net/nju7L8r5/](https://jsfiddle.net/nju7L8r5/)