Question

下面，我将触发器重新分配为false，但是当我运行此命令时，即使触发器变量为false，button.onclick函数仍将运行。不知道为什么会这样。需要功能在触发器变为假时停止。

首先，我将变量触发器分配为true。

我声明，如果x小于33，则触发器应变为false，因此button.onclick函数不应起作用。

// sets the variables
var n = document.getElementById("number");
var b = document.documentElement.style;
var count = 0;
var x = 0;
var trigger = true;
if (trigger == true) {
  button.onclick = function() {
    count++;
    n.innerHTML = count;
    x = Math.floor(Math.random() * 100);
    if (x < 33) {
      b.backgroundColor = "red";
      trigger = false;
    } else {
      b.backgroundColor = "black";
    }
  }
}

.root {
  background-color: black;
}

#number {
  color: white;
  font-size: 100px;
  font-family: Helvetica;
  text-align: center;
  margin: auto;
  border-radius: 1%;
  width: 30%;
  margin-top: 15%;
}

#button {
  display: block;
  background-color: white;
  outline: none;
  font-size: 15px;
  font-weight: bolder;
  text-transform: uppercase;
  padding: 10px 15px 10px 15px;
  border-radius: 5%;
  margin: auto;
  margin-top: 50px;
  font-family: Helvetica;
}

#rnum {
  display: block;
  text-align: center;
  font-size: 15px;
  color: white;
  margin-top: 50px;
}

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<div id="number" type="number"> 0 </div>
<div> <button id="button"> Click </button> </div>

Answer 1

由于trigger是true，所以事件处理程序与button元素一起附加，此后它在执行中不起作用，因为事件处理程序中的代码不评估条件if (trigger == true)。

您需要在事件处理程序内移动if条件

button.onclick = function () {
  if (trigger == true) { //Moved statement in event handler
    count ++;
    n.innerHTML = count;
    x = Math.floor(Math.random()*100);
    if (x < 33) {
      b.backgroundColor = "red";
      trigger = false;
    } else {
      b.backgroundColor = "black";
    }
  }
}

// sets the variables
var n = document.getElementById("number");
var b = document.documentElement.style;
var count = 0;
var x = 0;
var trigger = true;

button.onclick = function() {
  if (trigger == true) {
    count++;
    n.innerHTML = count;
    x = Math.floor(Math.random() * 100);
    if (x < 33) {
      b.backgroundColor = "red";
      trigger = false;
    } else {
      b.backgroundColor = "black";
    }
  }
}

.root {
  background-color: black;
}

#number {
  color: white;
  font-size: 100px;
  font-family: Helvetica;
  text-align: center;
  margin: auto;
  border-radius: 1%;
  width: 30%;
  margin-top: 15%;
}

#button {
  display: block;
  background-color: white;
  outline: none;
  font-size: 15px;
  font-weight: bolder;
  text-transform: uppercase;
  padding: 10px 15px 10px 15px;
  border-radius: 5%;
  margin: auto;
  margin-top: 50px;
  font-family: Helvetica;
}

#rnum {
  display: block;
  text-align: center;
  font-size: 15px;
  color: white;
  margin-top: 50px;
}

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<div id="number" type="number"> 0 </div>
<div> <button id="button"> Click </button> </div>

无法在Javascript中重新分配变量

1 个答案: