おしえて

JavaScriptでランダムで画像を表示するページを作りたいのですが......

解決済

質問者：jacobunbunmaru
質問日時：2021/08/03 19:26
回答数：1件

JavaScriptでランダムで画像を表示するスロットを作りたいのですが初心者ということで上手くいきません。
数字をランダムで表示することは出来たので、その部分を画像に置き換えようとしたのですがそこで動かなくなりました。
詳しい方いたら、どこをどう直せばいいのか教えてください。
画像ファイルはHTMLファイルと同じフォルダに入れており、それぞれ表示したい画像のフォルダ名は「(0~9までのいずれかの数字).png」です

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>スロット</title>
<script type="text/javascript">
spd=10; tID=0;
i=3; j=0; k=0;
m=0;
function start_slot(){
if (i>9){i=0;}
var i =Math.floor(Math.random 09 + 1);
document.write('<p><img scr="img/'+i+'png"></p>');
if (j>9){j=0;}
var j =Math.floor(Math.random 09 + 1);
document.write('<p><img scr="img/'+j+'png"></p>');
if (k>9){k=0;}
var k =Math.floor(Math.random 0*9 + 1);
document.write('<p><img scr="img/'+k+'png"></p>');

document.f.x.value=i; document.f.y.value=j; document.f.z.value=k;
if (m<1){ i++ ;}
if (m<2){ j++ ;}
if (m<3){ k++ ;}
tID=setTimeout("start_slot()", spd);
}
function stop_slot(){
if (m<3){m++; start_slot();}
if (m>2 && (i==j &&j==k)){ alert("やったね");}
clearTimeout(tID);
}
</script>
</head>

<body bgcolor="#191970" text="#ffffff">
<center>
<table border="3" bgcolor="#66cdaa"><tr><td>
<center>
<br><b>ROULETTE</b><br><br>

<form name="f">
<input name="x" size=1> <input name="y" size=1> <input name="z" size=1>
<br><br>
<input type="button" value="START" onClick="clearTimeout(tID); m=0; start_slot();">
<input type="button" value="STOP" onClick="stop_slot();">
</form><br>

</center>
</td></tr></table>

</center>
</body></html>

通報する

この質問は特に20代の方に
リクエストされています！
(回答を制限するものではありません。)

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Ogre7077
回答日時：2021/08/03 21:35

<img> は document.write ではなく

HTML 内の <input> を置き換える様に記載
<input name="x" size=1>
→ <img id=x src=img/9.png>

random はなくてもよいが、目押し対策として入れたいならば
i++; if(i>9)i=0;
→ i = Math.random()*10|0;

書き換えるのは <input value> ではなく <img src>
例) document.f.x.value=i;
→ document.getElementById("x").src = "img/" + i + ".png";

- 1
- 件

通報する

この回答へのお礼

回答ありがとうございます！
ご指摘していただいた個所を修正したのですが、自分の理解不足の点が多く上手く実行出来ず、どのように書き換えたらよいか教えていただけますでしょうか？

～略～

function start_slot(){
if (i>9){i=0;}
var i = Math.random()*10|0;

if (j>9){j=0;}
var j = Math.random()*10|0;

if (k>9){k=0;}
var k = Math.random()*10|0;

document.getElementsById("x").src = "img/" + i + ".png";
document.getElementsById("y").src = "img/" + j + ".png";
document.getElementsById("z").src = "img/" + k + ".png";

if (m<1){ i = Math.random()*10|0;}
if (m<2){ j = Math.random()*10|0;}
if (m<3){ k = Math.random()*10|0;}
tID=setTimeout("start_slot()", spd);
}

～略～

<form name="f">
<img id=x src=img/9.png> <img id=y src=img/8.png> <img id=z src=img/7.png>
<br><br>
<input type="button" value="START" onClick="clearTimeout(tID); m=0; start_slot();">
<input type="button" value="STOP" onClick="stop_slot();">
</form><br>

</center>
</td></tr></table>

</center>
</body></html>