I can't seem to define variables in my code, because document.getElementById( ) won't inse-CodePudding

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 ><b>Got </b>
</p><input type="textbox"  id="iGotThis">
<p ><b> out of </b></p>
<input type="textbox"  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:

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


var input = document.getElementById("total");

// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    document.getElementById("submit").click();
  }
});

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

.margin {
  margin-left: 80px;
}

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

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.

CodePudding user response：

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

CodePudding user response：

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.