Please tell me how to fix the bug.

I'm a beginner in programming.
The program is not working properly.
I tried to find out what the problem was and fix it, but it didn't work.
JavaScript ifStop doesn't seem to work.CSS doesn't seem to be reflected either.
Please tell me where and how to fix it.Please.

$=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() {
route=setInterval(function(){
variable = ";
varrnd = 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>
<metacharset="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>
<divid="view" style="text-align:center;">/div>
<hr of >
<divid="out"></div>
<hr of >
</section>
</body>
</html>

javascript html css

2022-09-30 17:45

1 Answers

Move the source to

Uncaught ReferenceError: rnd is not defined

You see the error

(Error can be checked using Chrome DevTools etc.)

This error is caused by using the rnd variable in the stopRoulette function, but the scope of the rnd variable is the startRoulette function.

So,

 var numList=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
var inStop = true;
varrnd;// Go here

where rnd is

Leaving the startRoulette function outside is likely to be one solution.

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

Then modify the startRoulette function to substitute the rnd variable as shown above.

2022-09-30 17:45

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656