本題とは異なりますが少し情報が古いように思えます。
アドバイスが欲しいとのことですのでいくつか指摘させていただきます。
(私も日々学習中の身ですが)
lang
1//まずインデントがめちゃくちゃなのが気になりますよね
2
3/*
4現在onclickでのイベントセットは推奨されていません
5addEventListener()の使用を推奨します(但し古いIEではattachEvent()を使用する必要がある)
6*/
7document.getElementById('dice').onclick =dice;
8
9function dice() {
10/*
11 6がマジックナンバーになっているのでDICE_MAX_NUMBERのような
12 定数(として扱う物)を作成して代入しておくべきかと
13*/
14 var rn1 = Math.ceil(Math.random() * 6);
15 var rn2 = Math.ceil(Math.random() * 6);
16
17/*
18 これは良くないですね
19 varを付けずに変数を宣言するとグローバル空間に変数を宣言してしまいます
20 なおかつimgという如何にも他のもの(JS,HTML,CSS)とぶつかりそうな名前を付けると
21 かなり問題になりますね
22 また参考としているURLを見た限り、この処理は無駄であると言えます
23 文字列を成型するだけで十分ですね
24 (imageオブジェクトを作る必要はない)
25 "sai" + rn1 +".gif"となる文字列を作成できればいいわけです
26 またここにはもう一つ問題があります
27*/
28 img = new Image();//var imgとすべき
29 //以下2行です
30 //これは同じものに代入していますから1行目の処理は何の意味も果たしません
31 img.src = "sai_" + a + ".gif";
32 img.src = "sai_" + b + ".gif";//上書きしている
33
34 /*
35 以下も大きな問題点です
36 document.imgメソッドは存在しません
37 質問者の方が行いたいのはdocument.images[0].srcです
38 またそもそもdocument.imagesを使用して今回のようなものを作成するのは
39 学習用のサンプルとしてしか使用できない手法です
40 この方法ですと他に画像が存在した場合
41 バグが発生するリスクが限りなく100%に近いでしょう
42 (つまり学習用としてはサンプルが悪いということになりますが……)
43 サイト内のすべての画像への処理とかならわからなくはないんですけどね
44 */
45 //一応オリジナルに従うと
46 document.img(0).src = img.src;//document.images[0].src="sai"+rn1+".gif"となるべき
47 document.img(1).src = img.src;//document.images[0].src="sai"+rn2+".gif"
48 //という感じですね
49}
以下はおまけとして適当に書きなおしたものを参考程度に。
lang
1//imageタグにidを設定しているものとする
2//サイコロを振るボタンのidはdice_roll
3//それぞれdice1_img dice2_imgとする
4//bodyの閉じタグ前に挿入する想定
5
6(function (_window,_document){//この記述を即時関数と呼ぶことが多い
7 //dice info
8 var IMAGE_NAME="sai";
9 var IMAGE_EXTENSION=".gif";
10 var DICE_MAX_NUMBER=6;
11
12 //Elements
13 var DICE_ROLL_BUTTON=_document.getElementById("dice_roll");
14 var DICE1=_document.getElementById("dice1_img");
15 var DICE2=_document.getElementById("dice2_img");
16
17 function getRandomNumber(_Number){
18 return Math.ceil(Math.random()*_Number);
19 };
20 function changeImage(_TargetElement,_src){
21 _TargetElement.src=_src;
22 };
23 function createImageName(){
24 return IMAGE_NAME+getRandomNumber(DICE_MAX_NUMBER)+IMAGE_EXTENSION;
25 };
26 function dice(_TargetElement){
27 if(!_TargetElement){
28 return;
29 }
30 var _src=createImageName();
31 changeImage(_TargetElement,_src);
32 };
33
34 function main(){
35 dice(DICE1);
36 dice(DICE2);
37 };
38
39 if(_window.addEventListener){
40 DICE_ROLL_BUTTON.addEventListener("click",main,false);
41 return;
42 }
43 DICE_ROLL_BUTTON.attachEvent("onclick",main);
44}(window,document));
動作確認してませんがきっと動くはず(願望)
ちなみにこのコードも綺麗とは言えないと思います。
まず変数や配列、オブジェクトなど基本的な文法やルールなどの復習をしてみた方がいいかと思います。
現状はよくわからないけど弄ってみたというようなコードになっていますので。
勿論それも勉強の中で発見があったりするのですが今回のようにちぐはぐになることもありますから。
あと余談として現在jsは別ファイルに記述してリンクする形が一般的になっています。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/04 06:14