0

プログラミング初心者です。
プログラムが正常に作動しません。
自分でどこが問題なのか調べ、直そうと努力したのですが、上手くいきませんでした。
JavaScriptのifStopのあたりがうまくいっていないようです。CSSも反映できていないようです。
どこをどう直せばいいのか教えてください。お願いします。

$=function(x){
return document.getElementById(x);
}

var numList=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

var inStop=true;

function startBingo(){
$("start").style.display="none";
$("stop").style.display="inline";
isStop=false;
startRoulette();
}

function stopBingo(){
$("start").style.display="inline";
$("stop").style.display="none";
isStop=true;
stopRoulette();
}

function startRoulette() {
roulette = setInterval(function() {
var id=" ";
var rnd=Math.floor(Math.random()*numList.length);
document.getElementById("view").innerHTML=numList[rnd];
});
}

function stopRoulette() {
if(roulette) {
clearInterval(roulette);
}

if(isStop){
if($("out").innerHTML){
$("out").innerHTML=$("out").innerHTML+numList[rnd];
}
else{
if($("out").innerHTML){
$("out").innerHTML=$("out").innerHTML+" "+numList[rnd];
}
}

numList.splice(rnd,1);

if(numList.length==0){
alert("FINISH!");
$("start").disabled=true;
}
return false;
}
}
@charset "UTF-8";

#view{
 font-size:20em;
 font-family:"sans-serif"
 background-color:#ffffff;
 color:#000000;
}

#start{
 width:200px;
}

#stop{
 width:200px;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bingo-program.css"
 type="text/css" />
<script type="text/javascript" src="check.js"></script>
<title>BINGO-Program-for-schoolfestival</title>
</head>
<body>
<header style="text-align:center;">
<strong>BINGO!</strong>
</header>
<br>
<section style="text-align:center;">
<input type="button" id="start" name="start" value="START" onclick="startBingo()">
<input type="button" id="stop" name="stop" value="STOP" onclick="stopBingo()" style="display:none;">
<br>
<div id="view" style="text-align:center;"></div>
<hr/>
<div id="out"></div>
<hr/>
</section>
</body>
</html>

2

1 件の回答 1

2

ソースを動かすと

Uncaught ReferenceError: rnd is not defined

というエラーが出ていますね。

(エラーはChrome DevToolsなどを使えば確認できます)

このエラーは stopRoulette関数内でrnd変数を使っていますが、rnd変数のスコープがstartRoulette関数であることに起因しています。

そこで、

var numList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
var inStop = true;
var rnd; // ここに移動

として、 rnd

startRoulette関数の外に出してしまうのが、ひとつの解決策となりそうです。

function startRoulette() {
  roulette = setInterval(function () {
    var id = " ";
    rnd = Math.floor(Math.random() * numList.length);
    document.getElementById("view").innerHTML = numList[rnd];
  });
}

そして、startRoulette関数は上記のように外に出した rnd 変数への代入を行うように修正しましょう。

2
  • 回答通りにやってみたのですが、上手くいきません。HTML内のoutのところにルーレットを止めたときに出た数字が記録されていくようにしたいのですが、ここが全く機能しませんでした。どうすればいいのでしょうか?
    – user35359
    2019年8月5日 7:45
  • 2
    そもそもStackOverflowは質問に対して、答えがひとつに定まるように質問することが推奨されていたと思います。ですので、今回は「Uncaught ReferenceError」にのみ絞って、「数字が記録されていくようにしたい」のは別の質問として新しく質問を立てることをおすすめします。また @nekketsuuu がおっしゃるとおり、どのように動けば正常なのかは質問に書かなければ、回答は付きづらいと思います(今回であれば、数字が記憶されていくといった仕様。CSSであれば、完成の画像を画像編集ソフトで提示するなどが考えられます) 2019年8月5日 8:44

この質問に回答するには、ログインする必要があります。