Javascript：一些变量已定义，一些未定义

Question

我正在编写一个基本的赌场 JavaScript 游戏，它将随机选择 3 个数字 1-10。如果每个数字都是 7，它将显示一个警告框，上面写着“你赢了！”。在下面的函数中：

function StartSpin(){
        var one;
        var two;
        var three;
        var cone;
        var ctwo;
        var cthree;
        var one = Math.floor((Math.random() * 10) + 1);
        var two = Math.floor((Math.random() * 10) + 1);
        var three = Math.floor((Math.random() * 10) + 1);
        if(one == 1){var cone = "Ace";}
        if(two == 1){var ctwo = "Ace";}
        if(three == 1){var cthree = "Ace";}
        document.getElementsByClassName("Spinner")[0].innerHTML= cone
        document.getElementsByClassName("Spinner")[1].innerHTML= ctwo
        document.getElementsByClassName("Spinner")[2].innerHTML= cthree
    }

在单击按钮开始随机化之前的实际页面上显示： --|--|--。单击它时，它将 -- 设置为随机数。每个数字/--集合都表示未定义，除了有时会说“Ace”表示它是 1。所以它可能会说：未定义|Ace|未定义，或未定义|未定义|未定义等。 这是 HTML：

<div id="GameOne">
    <h1>~ Game One ~</h1>
    <h2>Try to get three 7's!</h2>
    <span class="so Spinner">--</span> | 
    <span class="st Spinner">--</span> | 
    <span class="sth Spinner">--</span>
    <br/>
    <button id="SpinButton" onclick="StartSpin()">Spin!</button>
</div>

编辑：我重新定义了变量，看看这是否有助于解决未定义的问题（在 javascript 代码中仅供参考）

Answer 1

看起来您在变量的工作方式上遇到了一些问题。 cone、ctwo 和 cthree 在大多数情况下是未定义的，除非你得到 1。此外，您只需在创建变量时在变量前面声明var。后面的引用只使用变量名：

var i = 1;
var j = i + 5;
console.log("i is", i, "and j is", j); // will print `i is 1 and j is 5`

没有设置值的声明变量将是undefined

var k;
console.log(k); // will print `undefined`

在您的代码中，您试图将1 转换为字符串“Ace”，但在所有其他情况下，您最终会丢弃one、two 和three 中的值。这应该可以代替：

function StartSpin() {
  // Function to make a number between 1 and 10, if 1 return "Ace" instead
  function randomNumberOrAce() {
    var number = Math.floor((Math.random() * 10) + 1);

    // Check here if it's a `1`, and return "Ace instead", otherwise return the previously stored value
    if (number === 1) {
      return "Ace";
    } else {
      return number;
    }
  }

  // Fill in the first three elements of ".Spinner" with three random numbers
  document.getElementsByClassName("Spinner")[0].innerHTML = randomNumberOrAce();
  document.getElementsByClassName("Spinner")[1].innerHTML = randomNumberOrAce();
  document.getElementsByClassName("Spinner")[2].innerHTML = randomNumberOrAce();
}

<div id="GameOne">
  <h1>~ Game One ~</h1>
  <h2>Try to get three 7's!</h2>
  <span class="so Spinner">--</span> |
  <span class="st Spinner">--</span> |
  <span class="sth Spinner">--</span>
  <br/>
  <button id="SpinButton" onclick="StartSpin()">Spin!</button>
</div>

Answer 2

简短的回答是，如果您随机获得数字 1，则您只提供除 undefined 以外的变量值。否则，它们将保持 undefined - 这是 JavaScript 中变量的默认值。

这里有一些经过认真整理的逻辑：

http://jsbin.com/milibusaxe/1/edit?html,js,output

function roll() {
  var n = Math.floor((Math.random() * 10) + 1);
  return (n === 1 ? 'Ace!' : n);
}

function StartSpin(){
  var slots = document.getElementsByClassName("Spinner");

  for (var i = 0, e = slots.length; i < e; i++) {
    slots[i].innerHTML = roll();
  }
}

document.getElementById('SpinButton').addEventListener('click', StartSpin);

作为旁注，三个七还是三个？可能想在那个问题上下定决心。

Answer 3

仅当 one、two 或 three（分别）等于 1 时，您才定义 cone、ctwo 和 ctree。否则，变量不会被启动，这就是它们未定义的原因。

见undefined

你可以试试这个： https://jsfiddle.net/0jaxL1hb/1/

Answer 4

它们被设置为未定义，因为您仅在随机选择 1 时设置变量（cone、ctwo、cthree）。我假设如果没有抽到 A，您希望显示数字？

function StartSpin() {
    for (var i = 0; i < 3; i++) {
       var num = Math.floor((Math.random() * 10) + 1);

       if (num == 1) {
           num = 'Ace';
       }

       document.getElementsByClassName("Spinner")[i].innerHTML = num;
    }
}

Answer 5

你已经在不同的范围内声明了两次变量。

function StartSpin(){
...
        var cone;
        var ctwo;
        var cthree;
...
        if(one == 1){var cone = "Ace";} // here remove var, otherwise JS will scope it to the IF.
        if(two == 1){var ctwo = "Ace";}
        if(three == 1){var cthree = "Ace";}
...
    }