59191


[javascriptを用いて1~10を選べるプルダウンを作りたい。 -
teratail](https://teratail.com/questions/10343)

上記ページを参考に指定したのですが、動きません。console.logも表示されないです。

  1. `getElementById("セレクトボックスのID");`を指定
  2. `function setSelectMonth()` はselectボックスの `name="selectMonth"` を指定

なぜJavascriptが呼ばれないのか教えていただきたいです。

* * *

**Javascript**

[code]

    function setSelectMonth(){ console.log("123");
        var selectElement = document.getElementById("Month");
        for(var i = 1; i <= 12; i ++){
            var option = document.createElement("option");
            option.value = i;  
            option.innerText = i;  
            selectElement.appendChild(option);
        }
    }
    
[/code]

**HTML**

[code]

    <form>
    <table>
    <tr>
        <th>年度</th> 
        <select name="selectMonth" style="width: 40%;" id="select">
        </select> 月<script th:src="@{/js/js}" id="Month"></script></td>       
    </tr>
    </table></form>  
    
[/code]


CC BY-SA 4.0
2019-09-12T08:34:52.810
59020
2019-09-21T03:59:48.183
2019-09-13T00:07:26.507
3060
35696
question
javascript
Javascriptが呼ばれない理由がわからない


完全なコードを見てないので推測ですが`setSelectMonth`を呼び出していないからでは無いですか.  
`function`定義は定義するだけで呼び出しは自動的にされません.


CC BY-SA 4.0
2019-09-12T09:02:03.417
59022
2019-09-12T09:02:03.417
12216
59020
answer


HTMLコードをこれに変更してください:  

[code]

    <form>
    <table>
    <tr>
        <th>年度</th> 
        <select name="selectMonth" style="width: 40%;" id="Month">
        </select> 月<script th:src="@{/js/js}"></script></td>       
    </tr>
    </table></form>
[/code]


CC BY-SA 4.0
2019-09-20T10:15:02.877
59183
2019-09-20T10:15:02.877
35924
59020
answer


これをブラウザで開き、F12で開発モードを開いてConsoleタブから  
initializeSlcMonth()  
selectSlcMonth(3)  
と打ってみてください。

[code]

    <html>
    
    <head>
    </head>
    
    <body>
        <form method="POST">
            <select name="slcMonth" style="width: 40%;" id="slcMonth"></select>
        </form>
        <script>
            // ES2015
            function initializeSlcMonth() {
                const selectElement = document.getElementById("slcMonth");
                for (let i = 1; i <= 12; i ++) {
                    const option = document.createElement("option");
                    option.value = i;
                    option.innerText = i + "月";
                    selectElement.appendChild(option);
                }
            }
            function selectSlcMonth(valMonth) {
                const selectElement = document.getElementById("slcMonth");
                selectElement.value = valMonth;
            }
        </script>
    </body>
    
[/code]

動かない理由  
select要素のidと、getElementIdに指定するidが違う  
（selectタグを操作したいのだから、selectタグのidを指定する）

推奨な書き方１  
html内のscriptはbodyの終わりにのみ書きましょう。それ以外は非推奨

推奨な書き方２  
scriptのfunction名は、動詞＋○○としましょう  
また、get○○、set○○は事実上予約された命名規則です。  
（getはvalueの取得、setはvalueの設定です。）

補足  
サンプルコード内で、varの代わりにES2015以降の追加文法のconstやletを使用しています。  
～iOS9.3.5(iPhone4S、~iPad2)、～IE11では（たぶん）動きません。


CC BY-SA 4.0
2019-09-21T03:49:48.367
59191
2019-09-21T03:59:48.183
2019-09-21T03:59:48.183
25396
25396
59020
answer