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

Question

我正在编写一个基本的赌场 javascript 游戏，它将随机选择 3 个数字 1-10。如果每个数字都是 7，它会显示一个警告框，上面写着 'You Win!'。在下面的函数中：

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
    }

<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 代码中 fyi）

Answer 1

它们被设置为未定义，因为您仅在随机选择 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 2

您已在不同范围内声明变量两次。

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";}
...
    }

Answer 3

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

参见 undefined

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

Answer 4

看起来您在变量的工作方式方面遇到了一些问题。在大多数情况下，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 5

简短的回答是，如果你随机得到数字 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);

附带说明一下，三七还是三一？可能想要在那个方面做出决定。

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

Javascript: Some Variables Defined, Some Undefined

html

javascript

random

undefined