JSでoptionを作成し、７日後から表示させる

Question

###前提・実現したいこと
JSで予約フォームに使うセレクトボックスを作成しています。
翌日からの表示までは出来ました。
これを７日後からの表示にしたいです。

###発生している問題・エラーメッセージ
①７日後からの表示にできない。
②window.onload=function()だと、動作しない。なのでonmouseover="create();"
にしたら、セレクトボックスをクリックする度にoption が作成されてしまう。
ご教授をお願いいたします。

###該当のソースコード
<select id="selectbox" onmouseover="create();">

<option value="">予約日を選択してください</option> </select> <script> function create() { var selectElement = document.getElementById("selectbox"); var today = new Date(); var loop = 40; var year, month, day, yobi_num, yobi, ans; for(var i =0 ;i<loop;i++){ year = today.getFullYear(); month = today.getMonth()+1; day = today.getDate(); yobi_num = today.getDay(); yobi = new Array("日","月","火","水","木","金","土"); ans = year +"/" + month + "/" + day + "(" + yobi[yobi_num] +")"; // console.log(ans); today.setDate(day + 1); var element = document.createElement("option"); element.innerText = ans; element.value = ans; selectElement.appendChild(element); } }; </script>

###試したこと
window.onload=function()だと、動作しない

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[mattn]

window.onload が正攻法(といってもonloadもあまり良いとは言えませんが)です。どう動かなかったか示して下さい。またその時のコードも載せて下さい。

Answer 1

①７日後からの表示にできない。

「var today = new Date();」の次の行で

today.setDate(today.getDate() + 7);

とするのではだめですか？

②window.onload=function()だと、動作しない。

ドキュメント構造を読み込み終わってない段階だと「getElementById」が動作しません。
bodyタグを閉じる直前とか、bodyタグを閉じた後とかに書いてみると動きが変わりませんか？

Comments

[退会済みユーザー]

bodyタグを閉じた後に書いたら動作しました。
７日後からの表示も出来ました。
本当にありがとうございました。

[x_x]

え、ちょっと待ってください。htmlの直下、つまり次のように書いたということですか？ ここには書けませんよ？
</body><script>...</script></html>

Answer 2

■7日後から
forの前に以下1行挿入
today.setDate(today.getDate() + 7);//7日後

■window.onload=function()だと、動作しない
試してみましたが、問題なく動作しました。
window.onload = function(){
//この中に処理
};

以下、動作デモURL
https://jsfiddle.net/monagano/L51zva0f/2/

Answer 3

予約というくらいですからサーバー側にプログラムが走っているのですよね？
であればサーバー側でコントロールすればよろしいのではないでしょうか？
もしクライアント側の時計を当てにしているのでしたら
必ずしも正しい日時が設定されているわけではありませんので