- ベストアンサー
テーブル背景を毎日入れ替える方法
以前ここで同様の質問させていただいた者です。 回答いただいた例を参考にして、自分なりに設定を直してみたのですが動かない状態です… もう一度ご教授をお願いします。 テーブルの背景画像を日によって変更できるように、と思っています。 tableタグ内は、以下のようにしました。 <table id="BACKIMG" ～中略～ style="BORDER: #7B7B7B 1px solid; background-image:url('image/tableback.jpg');"> またJavaScriptは外部ファイルにして 【Change.js】の内容↓ function fncChange() { var a; var date = new Date(); var d = date.getDate(); a = d % 7; if (a==0){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images0/top.jpg)"; }else if (a=1){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images1/top.jpg)"; }else if (a=2){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images2/top.jpg)"; }else if (a=3){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images3/top.jpg)"; }else if (a=4){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images4/top.jpg)"; }else if (a=5){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images5/top.jpg)"; }else if (a=6){ document.getElementById("BACKIMG").style.backgroundImage="url(images/images6/top.jpg)"; } } 使用する画像はフォルダで分けるつもりです。 HTMLにはHEADタグの間に <SCRIPT language="javascript" src="Change.js"> <!--// fncChange(); //--> </SCRIPT> を記述しています。 これで不足してる部分がありますでしょうか？ 解決策をよろしくお願いします。
- sakuraniku
- お礼率61% (11/18)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
HEADタグの間に、 fncChange(); と記述すると、画面がロードされる前に実行されます。 なので、その時点では、getElementById("BACKIMG")、で指定されるテーブルがまだありません。 <SCRIPT language="javascript" src="Change.js"> </SCRIPT> として、 <body onload="fncChange();"> のようにすると、画面のロードが完了したときにfncChange()が呼び出されます。
その他の回答 (2)
- m035
- ベストアンサー率44% (38/86)
【Change.js】の内容↓ function fncChange() { document.getElementById("BACKIMG").style.backgroundImage="url(images/images"+(new Date().getDate()%7)+"/top.jpg)"; } 【*.html】の内容↓ <html> <head> <script language="JavaScript" src="Change.js"></script> </head> <body onload="fncChange();"> <table id="BACKIMG" style="BORDER: #7B7B7B 1px solid; background-image:url('image/tableback.jpg');"> </body> </html> と、これが今までの回答をまとめ、かつ、 変数を一つも増やすことなく実行できるバージョンのソースです。 他の人のアイデアに少し改良しただけでしたが、少しは役に立ったでしょうか？
お礼
m035さん、まとめて頂いて有難うございました。 以上のように変更したら動きました。 レスごとに次々改善点が増えて、こんなにスマートになるなんて笑 ここはコンピューター[技術者向け]にカテゴリされているので、初歩的な質問でいいのかと恐る恐るの投稿でした。 m035さん含め、皆さんの回答大変参考になりました。 有難うございました。
- steel_gray
- ベストアンサー率66% (1052/1578)
#1さんの回答に加えて。 判定をすべきところで代入しちゃってますね。 else if (a=n) ↓ else if (a==n) 判定を繰り返すのではなく、次のように一文にまとめてもいいかも。 document.getElementById("BACKIMG").style.backgroundImage = "url(images/images" + a + "/top.jpg)";
お礼
確かに(^^;) スクリプト以前の問題ですね。 自分でも判定の部分が長くて冗長になっているなとは思っていたのですが、知識がなく… 勉強になりました。有難うございました。
お礼
初歩的なミスですね（汗） ロードされるタイミングについて理解していませんでした。お恥ずかしい。 大変参考になりました。ありがとうございました。