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