Question

我正在尝试创建使按钮只能使用一次的东西。为了做到这一点，我创建了一个if循环。在那个if循环中，我将其放入名为myFunction的函数中，然后将变量button设置为0（if循环仅在button为= 2时运行。它不会首先运行。我在做什么错？

我已经尝试过重新创建变量（说出var按钮一次，然后在循环中再说一次）。

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
var button = 2;
var x = 0

function ins() {
  function removeElement(elementId) {
    // Removes an element from the document
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
  }
  x = getRndInteger(0, window.innerWidth)
  alert(x);
}

function button() {

  if (button === 2) {
    alert("k")
    myFunction();
    button = 0;

  } else {}

}

function myFunction() {

  var para = document.createElement("SPAN");
  para.style.position = "absolute";
  x = getRndInteger(0, (window.innerWidth - 60))
  para.style.left = x + "px"
  var p = getRndInteger(0, (window.innerHeight - 60))
  para.style.top = p + "px"
  para.style.display = "inline-block;"
  para.style.height = "50px"
  para.style.width = "50px"
  para.style.backgroundColor = "red"
  para.style.borderRadius = "50px"
  para.style.border = "1px solid black"
  para.style.animation = "1s a linear"
  para.id = "a"
  para.onclick = myFunction
  document.getElementById("myDIV").appendChild(para);
}

@keyframes a {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

button {
  background-color: #010417;
  border-radius: 10px;
  border: 4px solid white;
  color: white;
  padding: 10px 26px;
  font-size: 20px;
}

<div id="myDIV"></div>
<center>
  <button id="button" onClick="button();">Start</button>
</center>

编辑：忽略删除功能，并不意味着什么

Answer 1

此代码的问题是事件处理函数和标志（将值在2到0之间更改）都命名为“按钮”。 Java语言是一种相对宽松的语言，因此这种双重声明可能不会立即引发错误，但显然会导致意外行为。

查看您的代码：

var button = 2;
function button() {

  if (button === 2) {
    alert("k")
    myFunction();
    button = 0;

  } else {}

}

在这种情况下（取决于JS引擎），按钮要么引用函数，要么引用数字。如果是数字，则单击按钮时将引发类型错误。由于代码将尝试像函数一样调用数字。如果是函数，则button === 2比较将始终为false，并且将执行（空）else块。无论哪种方式，您都不会得到预期的行为。您只需将变量名更改为其他名称，它就可以正常工作。

请注意，正如有人在评论中指出的那样，您应该更喜欢在此逻辑上向按钮添加disabled属性。除非目标是做其他事情而不是阻止多次单击按钮。

变量值不保存在if循环中

1 个答案: