

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

[code]

    $=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;
    }
    }
[/code]

[code]

    @charset "UTF-8";
    
    #view{
     font-size:20em;
     font-family:"sans-serif"
     background-color:#ffffff;
     color:#000000;
    }
    
    #start{
     width:200px;
    }
    
    #stop{
     width:200px;
    }
[/code]

[code]

    <!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>
[/code]


CC BY-SA 4.0
2019-08-04T07:44:33.580
57157
2019-08-04T09:21:43.207
question
javascript html css
バグの解決方法を教えてください


ソースを動かすと

> Uncaught ReferenceError: rnd is not defined

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

（エラーは`Chrome DevTools`などを使えば確認できます）

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

そこで、

[code]

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

として、 `rnd` を

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

[code]

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

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


CC BY-SA 4.0
2019-08-04T09:13:16.737
57158
2019-08-04T09:21:43.207
2019-08-04T09:21:43.207
9008
9008
57157
answer