'I can't seem to define variables in my code, because document.getElementById( ) won't insert the value in it [duplicate]

I am trying JavaScript and HTML with a little CSS (that is not required), and I can't seem to define this variable.

I have the element id with this HTML code:

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

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

var made = document.getElementById("iGotThis").value;
   var total = document.getElementById("outOfThis").value;
   var perMade = made / total;

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

    document.getElementById("submit").click();
  }
});

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

Here is the full code:

<!DOCTYPE html>
<html>
 <head>
  <style>
   .margin {
    margin-left: 80px;
   }
  </style>
 </head>
 <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()">

  <script>
   var iGotThis = document.getElementById("iGotThis").value;
   let outOfThis = document.getElementById("outOfThis").value;
   var perMade = iGotThis / outOfThis;
   
   
// This entire portion has no use for the variables
   var input = document.getElementById("outOfThis");

input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    document.getElementById("submit").click();
  }
});
// This is where the useless section ends


   function perFunction() {
    alert(iGotThis.value);
   };
   </script>
 </body>
</html>

I have tried just alerting the variable made or total but just comes up blank. I can't think of a solution so I am hoping someone can help. I am still pretty new to this stuff and can't so everything.

javascripthtml


Solution 1:[1]

there is no ID as "total" in the HTML code. Please check that

Solution 2:[2]

Input type=textbox is wrong. You can use type=text. Maybe the browser doesn't understand textbox's value, because textbox isn't an official HTML type value. You see an textbox, because the browser doesn't know what IT should use.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Akshaya Dupati
Solution 2 aWebDesigner123

Related Questions