How do I properly incorportate HTML inputs into JavaScript code without recieving a typeerror?-CodePudding

This piece of code has been giving me a lot of trouble. This is only my first time coding and I don't know what's wrong with it. Here is the error message I get:

"TypeError: Cannot read properties of null (reading 'value')

at calculator (/:11:57)

at HTMLButtonElement.onclick (/:5:32)"

Any help/tips are suggested.

<html>
<body>
 <id="userName"=> Hi! What is your name? <input type="text"</input> <br>
 <id="hoursWorked"=> How many hours have you worked this week? <input type="text"</input><br>
<button onclick="calculator()">Calculate</button>

<p id="HTMLinput"></p>   

<script type="text/javascript">
function calculator(){
var hoursWorked = document.getElementById("hoursWorked").value;
document.getElementById("HTMLinput").innerHTML = hoursWorked;
var userName = document.getElementById("userName").value;
document.getElementById("HTMLinput").innerHTML = userName;
var pay = ("$"   hoursWorked * 15) 
var hoursLeft = (40 - hoursWorked); //This equation determines how many hours of work the user has left to complete
if (hoursLeft < 0){
 alert ("Uh oh! "   userName   "! That's too many hours!")}; //If the user enters an amount of hours that is over 40 they will recieve an error message
if (hoursLeft === 0){
 alert ("Congratulations, "   userName   "! You have completed all 40 hours of work!"); //If the user has completed 40 hours of work they will be given this message
 alert  ( userName   ", your pay will be: "   pay)}; 
if (hoursLeft > 40){
 alert (userName   "! That is not possible!")}; //If the user enters an amount larger than 40 they will get this error, since that is not possible
if (hoursLeft >= 1 && hoursLeft <= 39 ){
  alert (userName   "! You have "   hoursLeft   " more hours to work.") //If the user enters a normal amount of hours (1-39) then they will get this message
  alert  ( userName   ", your pay so far will be: "   pay)}; 
if (hoursLeft === 40){
 alert (userName   "! You haven't worked any hours this week! Your pay so far is zero.");}
}
</script>
</body>
</html>

CodePudding user response：

It seems that you have some extra tags with no meaning...

You have <id="userName"=> which is not a valid tag. Instead, you should simply remove this tag and put it inside a label. The id attribute should go inside the input tag.

<html>
<body>
 <label for="userName"> Hi! What is your name? </label><input id="userName" type="text"> <br>
 <label for="hoursWorked"> How many hours have you worked this week?</label><input id="hoursWorked"type="text"><br>
<button onclick="calculator()">Calculate</button>

<p id="HTMLinput"></p>   

<script type="text/javascript">
function calculator(){
var hoursWorked = document.getElementById("hoursWorked").value;
document.getElementById("HTMLinput").innerHTML = hoursWorked;
var userName = document.getElementById("userName").value;
document.getElementById("HTMLinput").innerHTML = userName;
var pay = ("$"   hoursWorked * 15) 
var hoursLeft = (40 - hoursWorked); //This equation determines how many hours of work the user has left to complete
if (hoursLeft < 0){
 alert ("Uh oh! "   userName   "! That's too many hours!")}; //If the user enters an amount of hours that is over 40 they will recieve an error message
if (hoursLeft === 0){
 alert ("Congratulations, "   userName   "! You have completed all 40 hours of work!"); //If the user has completed 40 hours of work they will be given this message
 alert  ( userName   ", your pay will be: "   pay)}; 
if (hoursLeft > 40){
 alert (userName   "! That is not possible!")}; //If the user enters an amount larger than 40 they will get this error, since that is not possible
if (hoursLeft >= 1 && hoursLeft <= 39 ){
  alert (userName   "! You have "   hoursLeft   " more hours to work.") //If the user enters a normal amount of hours (1-39) then they will get this message
  alert  ( userName   ", your pay so far will be: "   pay)}; 
if (hoursLeft === 40){
 alert (userName   "! You haven't worked any hours this week! Your pay so far is zero.");}
}
</script>
</body>
</html>

CodePudding user response：

There are some errors in your HTML. I would suggest associating the id's to your inputs instead of at the beginning.

<html>
<body>
 Hi! What is your name? <input id= "userName" type="text"</input> <br>
 How many hours have you worked this week? <input id="hoursWorked" type="text"</input><br>
<button onclick="calculator()">Calculate</button>

<p id="HTMLinput"></p>   

<script type="text/javascript">
function calculator(){
var hoursWorked = document.getElementById("hoursWorked").value;
var userName = document.getElementById("userName").value;
document.getElementById("HTMLinput").innerHTML = userName   " worked "   hoursWorked   " hour(s).";
var pay = "$"   (hoursWorked * 15);
var hoursLeft = (40 - hoursWorked); //This equation determines how many hours of work the user has left to complete
if (hoursLeft < 0){
 alert ("Uh oh! "   userName   "! That's too many hours!")}; //If the user enters an amount of hours that is over 40 they will recieve an error message
if (hoursLeft === 0){
 alert ("Congratulations, "   userName   "! You have completed all 40 hours of work!"); //If the user has completed 40 hours of work they will be given this message
 alert  ( userName   ", your pay will be: "   pay)}; 
if (hoursLeft > 40){
 alert (userName   "! That is not possible!")}; //If the user enters an amount larger than 40 they will get this error, since that is not possible
if (hoursLeft >= 1 && hoursLeft <= 39 ){
  alert (userName   "! You have "   hoursLeft   " more hours to work.") //If the user enters a normal amount of hours (1-39) then they will get this message
  alert  ( userName   ", your pay so far will be: "   pay)}; 
if (hoursLeft === 40){
 alert (userName   "! You haven't worked any hours this week! Your pay so far is zero.");}
}
</script>
</body>
</html>

CodePudding user response：

You mentioned prompt in your comment, so here's a version of this using prompts (Probably not what you were looking for, but a teaching moment nonetheless).

document.addEventListener('DOMContentLoaded', calculator);

function calculator() {
  let userName = prompt('Hi! What is your name?');
  let hoursWorked = prompt('How many hours have you worked this week?');
  var pay = ("$"   hoursWorked * 15)
  var hoursLeft = (40 - hoursWorked); //This equation determines how many hours of work the user has left to complete
  if (hoursLeft < 0) {
    alert("Uh oh! "   userName   "! That's too many hours!")
  }; //If the user enters an amount of hours that is over 40 they will recieve an error message
  if (hoursLeft === 0) {
    alert("Congratulations, "   userName   "! You have completed all 40 hours of work!"); //If the user has completed 40 hours of work they will be given this message
    alert(userName   ", your pay will be: "   pay)
  };
  if (hoursLeft > 40) {
    alert(userName   "! That is not possible!")
  }; //If the user enters an amount larger than 40 they will get this error, since that is not possible
  if (hoursLeft >= 1 && hoursLeft <= 39) {
    alert(userName   "! You have "   hoursLeft   " more hours to work.") //If the user enters a normal amount of hours (1-39) then they will get this message
    alert(userName   ", your pay so far will be: "   pay)
  };
  if (hoursLeft === 40) {
    alert(userName   "! You haven't worked any hours this week! Your pay so far is zero.");
  }

  document.querySelector('#HTMLinput').innerHTML = "<button onclick='calculator()'>Try again</button>";
}

<p id="HTMLinput"></p>

CodePudding user response：

First of all, the whole html syntax you wrote does not exists in html5. input tags have no closing tag. More into the correction, the id's for elements must be inside a proper html tag, in your case, you need to add them into the input tags. Like so, the resulting code would be something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <p>Hi! What is your name?</p><input type="text" id="userName">
    <p>How many hours have you worked this week?</p><input type="text" id="hoursWorked">
    <button onclick="calculator()">Calculate</button>
    <p id="HTMLinput"></p>
    <script type="text/javascript">
        function calculator(){
            var hoursWorked = document.getElementById("hoursWorked").value;
            var userName = document.getElementById("userName").value;
            document.getElementById("HTMLinput").innerHTML = `${userName} ${hoursWorked}`

            //The rest of your code
            var pay = ("$"   hoursWorked * 15)
            var hoursLeft = (40 - hoursWorked);
            if (hoursLeft < 0) {
                alert("Uh oh! "   userName   "! That's too many hours!")
            };
            if (hoursLeft === 0) {
                alert("Congratulations, "   userName   "! You have completed all 40 hours of work!"); //If the user has completed 40 hours of work they will be given this message
                alert(userName   ", your pay will be: "   pay)
            };
            if (hoursLeft > 40) {
                alert(userName   "! That is not possible!")
            }; //If the user enters an amount larger than 40 they will get this error, since that is not possible
            if (hoursLeft >= 1 && hoursLeft <= 39) {
                alert(userName   "! You have "   hoursLeft   " more hours to work.") //If the user enters a normal amount of hours (1-39) then they will get this message
                alert(userName   ", your pay so far will be: "   pay)
            };
            if (hoursLeft === 40) {
                alert(userName   "! You haven't worked any hours this week! Your pay so far is zero.");
            }
        }
    </script>
</body>
</html>

The JS its almost perfect. Try to not abuse of if staments and use structures such us switch case. And also, for helping others to check your code, try to format the code. if you don't have a linter in your code editor, you can use online tools such us beautifier.io. Hope this helps you :D