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>>Solution :
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>