Variable values don't save in if loops

Question

I'm attempting to create something that makes a button only work once. In order to do so, I created an if loop. In that if loop, I put it to a function called myFunction and then set a variable, button, to 0 (the if loop only runs if button is =2. It will not run in the first place. What am I doing wrong?

I've already attempted to recreate the variable(saying var button once out of the loop and then saying it again within).

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>

EDIT: Ignore the delete function, doesn't mean anything

why don't you just set the disabled attribute on click event? it will work for the first time only — Lelio Faieta, Apr 29 '19 at 16:38
https://stackoverflow.com/questions/10887291/js-global-variable-to-local-variable — BugSquasher, Apr 29 '19 at 16:39
element.setAttribute("disabled", "disabled"); is the way to set an element to disabled. Adapt it to your code and simply put it in the button() function — Lelio Faieta, Apr 29 '19 at 16:42
Your snippet doesn't work: `Uncaught TypeError: button is not a function`. The problem is that you have the same name for the function as for the variable. If you change one of them it seems to work as you want it to... — nvioli, Apr 29 '19 at 16:43
You can't have a variable and a function with the same name in the same scope. — FZs, Apr 29 '19 at 16:45
you just need the myfunction function, the button one is not necessary — Lelio Faieta, Apr 29 '19 at 16:46

score 1 · Accepted Answer · answered Apr 29 '19 at 17:02

The issue with this code is that your event handler function, and the flag (that changes value between 2 and 0) are both named 'button'. Javascript is a relatively accommodating language, so this kind of dual declaration might not throw error right away, but it will obviously cause unexpected behaviour.

Looking at your code:

var button = 2;
function button() {

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

  } else {}

}

In this case (depending on the JS engine), button either refers to the function or the number. If it's the number, then type error will be thrown when button is clicked. Since the code will try to call the number like a function. If it's a function, then the button === 2 comparison will always be false, and the (empty) else block will get executed. Either way you wouldn't get the expected behavior. You can simply change the variable name to something else, and it should work.

Please note that, as someone pointed out in comments, you should prefer adding disabled attribute to the button over this logic. Unless the aim is to do something other than blocking multiple clicks of the button.

Variable values don't save in if loops

1 Answers1