スロットが変な動きをします
JavaScriptで子供用にPCで遊べるようにスロットを作りました。
ここで疑問なのですが、最初にスタートとストップボタンを画像分だけ作りましたが、
スタートを同時にしてストップだけを個別にするためにスタートボタンを1個にしたら
変な動きになりました。
色々とやってみましたが以外に苦心しています。誰か宜しくお願いします。
スタートを3個にすれば簡単なことは十分わかってはいるのですが。
________________________________________
<html><head><title></title>
<script type="text/javascript">
var picture = new Array(3);
picture[1] = new Image();
picture[2] = new Image();
picture[3] = new Image();
picture[1].src = "img/data1.jpg";
picture[2].src = "img/data2.jpg";
picture[3].src = "img/data3.jpg";
function autoChange()
{
function autoChange1();
function autoChange2();
function autoChange3();
}
function autoChange1()
{
var kaiten1 = Math.round(9*Math.random());
document.initial1.src = picture[kaiten1].src;
timer1 = setTimeout("autoChange1()", 100);
}
function autoChange2()
var kaiten2 = Math.round(9*Math.random());
document.initial2.src = picture[kaiten2].src;
timer2 = setTimeout("autoChange2()", 100);
}
function autoChange3()
{
var kaiten3 = Math.round(9*Math.random());
document.initial3.src = picture[kaiten3].src;
timer3 = setTimeout("autoChange3()", 100);
}
function stop1(){
clearTimeout(timer1);
}
function stop2()
{
clearTimeout(timer2);
}
function stop3()
{
clearTimeout(timer3);
}
</script>
</head>
<form>
<input type="button" value="START" onclick="autoChange()">
<img src="img/data1.jpg" name="initial1">
<img src="img/data1.jpg" name="initial2">
<img src="img/data1.jpg" name="initial3">
<br><br>
<input type="button" value="STOP" onclick="stop1()">
<input type="button" value="STOP" onclick="stop2()">
<input type="button" value="STOP" onclick="stop3()">
</form>
</body></html>
お礼
sanntana-3さんアドバイスありがとう御座いました。もうそろそろ寿命かなって半分は思ってたんです、これでスッキリしました、買い替えを検討します。