My variables are not being stored, is it possible to fix?

Question

The individual variables are being defined and I can alert them, it's when I want to divide one by the other that, not only it doesn't give me an answer, it doesn't even alert a box!

I have the element id with this HTML code:

<p class="margin"><b>Got </b>
</p><input type="number" class="margin" id="iGotThis">
<p class="margin"><b> out of </b></p>
<input type="number" class="margin" id="outOfThis">

and get it into a variable with js and this code:

   let iGotThis = document.getElementById("iGotThis").value;
   let outOfThis = document.getElementById("outOfThis").value;
   let perMade = iGotThis / outOfThis;

and I am trying to alert the result with an alert function:

    document.getElementById("submit").click();
  }
});
   function perFunction() {
    alert(perMade);
   };

// This entire portion has no use for the variables
var input = document.getElementById("outOfThis");
var perMade = 0;

input.addEventListener("keyup", function(event) {

  let iGotThis = document.getElementById("iGotThis").value;
  let outOfThis = document.getElementById("outOfThis").value;
  let perMade = iGotThis / outOfThis;
  if (event.keyCode === 13) {
    event.preventDefault();
    document.getElementById("submit").click();
  }
});
// This is where the useless section ends


function perFunction() {
  alert(perMade);
};

.margin {
  margin-left: 80px;
}

<!DOCTYPE html>
<html>

<body>
  <br>
  <br>
  <p class="margin"><b>Got </b></p><input type="number" class="margin" id="iGotThis">
  <p class="margin"><b> out of </b></p><input type="number" class="margin" id="outOfThis">
  <br>
  <br>
  <input type="submit" id="submit" class="margin" onclick="perFunction()">
</body>

</html>

Again, the iGotThis and outOfThis variables work, but it is when I try to recall perMade that it just completely breaks.

You're explicitly declaring your variables to be local variables (see [let vs var](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var)). They are only valid within the input keyup handler. — Tibrogargan, Apr 25 '22 at 18:39
If you looked at the javascript console in your browser developer tools you would see the error `Uncaught ReferenceError: perMade is not defined` with the line number where the error occurred. — Stephen P, Apr 25 '22 at 20:36

score 1 · Accepted Answer · answered Apr 25 '22 at 18:47

The problem is that the variable you are working with is not in scope. As it is being declared from within another function, that is the scope it stays in. To resolve this, you can elevate the scope by declaring the perMade variable at the start of your code.

// This entire portion has no use for the variables
var input = document.getElementById("outOfThis");
var perMade = 0;


input.addEventListener("keyup", function(event) {

  let iGotThis = document.getElementById("iGotThis").value;
  let outOfThis = document.getElementById("outOfThis").value;
  perMade = iGotThis / outOfThis;
  if (event.keyCode === 13) {
    event.preventDefault();
    document.getElementById("submit").click();
  }
});
// This is where the useless section ends


function perFunction() {
  alert(perMade);
};

.margin {
  margin-left: 80px;
}

<!DOCTYPE html>
<html>

<body>
  <br>
  <br>
  <p class="margin"><b>Got </b></p><input type="number" class="margin" id="iGotThis">
  <p class="margin"><b> out of </b></p><input type="number" class="margin" id="outOfThis">
  <br>
  <br>
  <input type="submit" id="submit" class="margin" onclick="perFunction()">
</body>

</html>

Thank you! that works, now I can finally continue! – Landon Wallick Apr 26 '22 at 19:12 — Landon Wallick, Apr 26 '22 at 19:12

My variables are not being stored, is it possible to fix?

1 Answers1