JavaScript　ユーザー定義オブジェクト　画像をランダム（Math.random）に表示する。（画像の名前が文字の場合）

本日は、JavaScript　ユーザー定義オブジェクト　画像をランダム（Math.random）に表示する。※画像の名前が文字の場合

【準備】

ランダムに表示させたい画像を6枚用意
画像の名前をone　two 　three　 four　 five　 six にして保存します。
この時、フォルダ名はimgとします

f:id:kaoru01-05:20140411054135j:plain

【独自解答】

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像名が、整数化した数値で取得できない場合</title>
</head>

<body>
<script>
img = new Array();
img[0] = "img/one.jpg";
img[1] = "img/two.jpg";
img[2] = "img/three.jpg";
img[3] = "img/four.jpg";
img[4] = "img/five.jpg";
img[5] = "img/six.jpg";
function huru(){
var i = Math.floor( Math.random()*5+1);
console.log(i);

var i =Math.random();
console.log(i);
i =i*6;
console.log(i);
i =i+1;
i = Math.floor(i);
console.log(i);

*/

document.dimg.src=img[i-1];
}

</script>
<p><img src="img/one.jpg" name="dimg"></p>

<p>サイコロふりますか？<button onClick="huru()">はい</button></p>
</body>
</html>

※独自解答の場合、画像が6枚と分かっている場合で、今後増えないのが分かっている場合は有効かと思われる・・・。が、もし枚数が増えた場合、数字の打ち直し部分はが数か所離れた場所（※上記赤字）にあり、見落としやすいと思われる。

【模範解答】

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title> 画像名が、整数化した数値で取得できない場合模範解答</title>
<script>
var sai=new Array('one.jpg','two.jpg','three.jpg','four.jpg','four.jpg','five.jpg','six.jpg')
function dice(){
var i =Math.floor(Math.random()*sai.length);
console.log(r);
document.dimg.src='img/' + sai[ i ];
console.log(sai[ i ]);
</script>
</head>
<body>
<p><img src="img/one.jpg" name="dimg"></p>
<p><button onClick="dice()">サイコロを振ってみる</button></p>
</body>
</html>