时间戳

首页 > 解决方案 > 如何让我的 JS 宾果机输出我的被叫号码？

javascript - 如何让我的 JS 宾果机输出我的被叫号码？

问题描述

我正在处理这个宾果游戏机脚本，但它没有输出我的被叫号码或以前在我的输出 div 中调用的号码。这是我的 JS 认证的一部分，我在这里真的碰壁了。我该如何进行？

我尝试将常规文本输出放入我的 callNum 和 numCalled 函数中，以查看这些函数是否被正确调用/正确输出而没有结果。

<html>
<head></head>
<body>
<div id="buttons">
  <button onClick="callNum()">
    Call bingo number
  </button>
  <button onClick="numCalled()">
    Numbers called
  </button>
  <button onClick="setGame()">
    Start/Reset Game
  </button>
</div>
<div id="bingonumber"></div>
<div id="numberscalled"></div>
<script>
    const numbers = new Set()
      .add("B1")
      .add("B2")
      .add("B3")
      .add("B4")
      .add("B5")
      .add("B6")
      .add("B7")
      .add("B8")
      .add("B9")
      .add("B10")
      .add("B11")
      .add("B12")
      .add("B13")
      .add("B14")
      .add("B15")
      .add("I16")
      .add("I17")
      .add("I18")
      .add("I19")
      .add("I20")
      .add("I21")
      .add("I22")
      .add("I23")
      .add("I24")
      .add("I25")
      .add("I26")
      .add("I27")
      .add("I28")
      .add("I29")
      .add("I30")
      .add("N31")
      .add("N32")
      .add("N33")
      .add("N35")
      .add("N35")
      .add("N36")
      .add("N37")
      .add("N38")
      .add("N39")
      .add("N40")
      .add("N41")
      .add("N42")
      .add("N43")
      .add("N44")
      .add("N45")
      .add("G46")
      .add("G47")
      .add("G48")
      .add("G49")
      .add("G50")
      .add("G51")
      .add("G52")
      .add("G53")
      .add("G54")
      .add("G55")
      .add("G56")
      .add("G57")
      .add("G58")
      .add("G59")
      .add("G60")
      .add("O61")
      .add("O62")
      .add("O63")
      .add("O64")
      .add("O65")
      .add("O66")
      .add("O67")
      .add("O68")
      .add("O69")
      .add("O70")
      .add("O71")
      .add("O72")
      .add("O73")
      .add("O74")
      .add("O75")
    let curnum = new Array([]);
    let prevnum = new Array([]);

    function setGame() {
        let curnum = Array.from(numbers);
        let prevnum = [];
        document.getElementById('bingonumber').innerHTML = "Game time started";
    }

    function callNum() {
      var index = Math.floor(Math.random() * curnum.length);
      let remove = curnum.splice(index, 1);
      document.getElementById('bingonumber').innerHTML =  remove;
      prevnum.push(remove);
    }

    function numCalled() {
      let prevoutput = "";
      for (x = 0; x < prevnum.length; x++) {
        prevoutput += prevnum[x];
      }
      document.getElementById('numberscalled').innerHTML = output;
    }
</script>
</body>
</html>

我希望 callNum 的输出能够为我提供 curnum 数组中的拼接宾果号码，但它没有显示。numCalled 也没有输出任何东西。

标签： javascripthtml

解决方案

在你的函数体中使用 let 存在问题，它是块范围的。这是一个更明确的模板字符串，用于显示彼此的数字。

<html>
<head></head>
<body>
<div id="buttons">
  <button onClick="callNum()">
    Call bingo number
  </button>
  <button onClick="numCalled()">
    Numbers called
  </button>
  <button onClick="setGame()">
    Start/Reset Game
  </button>
</div>
<div id="bingonumber"></div>
<div id="numberscalled"></div>
<script>
    const numbers = new Set()
      .add("B1")
      .add("B2")
      .add("B3")
      .add("B4")
      .add("B5")
      .add("B6")
      .add("B7")
      .add("B8")
      .add("B9")
      .add("B10")
      .add("B11")
      .add("B12")
      .add("B13")
      .add("B14")
      .add("B15")
      .add("I16")
      .add("I17")
      .add("I18")
      .add("I19")
      .add("I20")
      .add("I21")
      .add("I22")
      .add("I23")
      .add("I24")
      .add("I25")
      .add("I26")
      .add("I27")
      .add("I28")
      .add("I29")
      .add("I30")
      .add("N31")
      .add("N32")
      .add("N33")
      .add("N35")
      .add("N35")
      .add("N36")
      .add("N37")
      .add("N38")
      .add("N39")
      .add("N40")
      .add("N41")
      .add("N42")
      .add("N43")
      .add("N44")
      .add("N45")
      .add("G46")
      .add("G47")
      .add("G48")
      .add("G49")
      .add("G50")
      .add("G51")
      .add("G52")
      .add("G53")
      .add("G54")
      .add("G55")
      .add("G56")
      .add("G57")
      .add("G58")
      .add("G59")
      .add("G60")
      .add("O61")
      .add("O62")
      .add("O63")
      .add("O64")
      .add("O65")
      .add("O66")
      .add("O67")
      .add("O68")
      .add("O69")
      .add("O70")
      .add("O71")
      .add("O72")
      .add("O73")
      .add("O74")
      .add("O75")
    let currentNumber = []
    let previousNumber = []

    function setGame() {
        currentNumber = Array.from(numbers);
        previousNumber = [];
        document.getElementById('bingonumber').innerHTML = "Game time started";
    }

    function callNum() {
      var index = Math.floor(Math.random() * currentNumber.length);
      var remove = currentNumber.splice(index, 1);
      document.getElementById('bingonumber').innerHTML =  remove;
      previousNumber.push(remove);
    }

    function numCalled() {
      var prevoutput = "";
      for (x = 0; x < previousNumber.length; x++) {
        prevoutput += `${previousNumber[x]}<br/>`;
      }
      document.getElementById('numberscalled').innerHTML = prevoutput;
    }
</script>
</body>
</html>

推荐阅读