时间戳

首页 > 解决方案 > 无法在 Javascript 中重新分配变量

javascript - 无法在 Javascript 中重新分配变量

问题描述

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

首先，我将变量 trigger 指定为 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>

标签： javascript

解决方案

由于事件处理程序trigger是true附加到按钮元素的，因此它在执行中没有任何作用，因为事件处理程序中的代码不会评估条件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>

推荐阅读