无法使用getElementByID从表单添加元素

Question

I can't seem to get my JavaScript to add the elements from my HTML page. Do I have a syntax error?

 var mondayHours = document.getElementById("mondayHours").value; var tuesdayHours = document.getElementById("tuesdayHours").value; var wednesdayHours = document.getElementById("wednesdayHours").value; var thursdayHours = document.getElementById("thursdayHours").value; var fridayHours = document.getElementById("fridayHours").value; var saturdayHours = document.getElementById("saturdayHours").value; var sundayHours = document.getElementById("sundayHours").value; var totalHours = mondayHours + tuesdayHours + wednesdayHours + thursdayHours + fridayHours + saturdayHours + sundayHours; function alertHours() { alert(totalHours); } 

 <fieldset> <p>Hours of Operation</p> <p> <label for="mondayHours">Monday <input name="mondayHours" type="number" id="mondayHours" /> </label> </p> <p> <label for="tuesdayHours">Tuesday <input name="tuesdayHours" type="number" id="tuesdayHours" /> </label> </p> <p> <label for="wednesdayHours">Wednesday <input name="wednesdayHours" type="number" id="wednesdayHours" /> </label> </p> <p> <label for="thursdayHours">Thursday <input name="thursdayHours" type="number" id="thursdayHours" /> </label> </p> <p> <label for="fridayHours">Friday <input name="fridayHours" type="number" id="fridayHours" /> </label> </p> <p> <label for="saturdayHours">Saturday <input name="saturdayHours" type="number" id="saturdayHours" /> </label> </p> <p> <label for="sundayHours">Sunday <input name="sundayHours" type="number" id="sundayHours" /> </label> </p> </fieldset> <input name="Calculate" type="submit" value="submit" onclick="alertHours()" /> <script src="Calculator_script.js"></script> 

Answer 1

You have to retrieve form data when you called your alertHours function.

The problem was that you retrieved form data at the beginning, and these data were undefined.

JS

function alertHours(){
  var mondayHours = parseFloat(document.getElementById("mondayHours").value) || 0;
  var tuesdayHours = parseFloat(document.getElementById("tuesdayHours").value) || 0;
  var wednesdayHours = parseFloat(document.getElementById("wednesdayHours").value) || 0;
  var thursdayHours = parseFloat(document.getElementById("thursdayHours").value ) || 0;
  var fridayHours = parseFloat(document.getElementById("fridayHours").value) || 0;
  var saturdayHours = parseFloat(document.getElementById("saturdayHours").value ) || 0;
  var sundayHours = parseFloat(document.getElementById("sundayHours").value) || 0;

  var totalHours = mondayHours + tuesdayHours + wednesdayHours + thursdayHours + fridayHours + saturdayHours + sundayHours;

  alert(totalHours)
} 

When you see parseFloat(...) || 0 parseFloat(...) || 0 , this tell : ok if an input is empty, i will set the 0 value for this input.

Answer 2

You are grabbing the values on page load and storing those in variables. Since at that time, they are valueless, you aren't getting your expected result. I would recommend the following option...

var mondayHours = document.getElementById("mondayHours");
var tuesdayHours = document.getElementById("tuesdayHours");
var wednesdayHours = document.getElementById("wednesdayHours");
var thursdayHours = document.getElementById("thursdayHours");
var fridayHours = document.getElementById("fridayHours");
var saturdayHours = document.getElementById("saturdayHours");
var sundayHours = document.getElementById("sundayHours");

function alertHours() {
  var totalHours = mondayHours.value + tuesdayHours.value + wednesdayHours.value + thursdayHours.value + fridayHours.value + saturdayHours.value + sundayHours.value;
  alert(totalHours);
}

This way you are getting the values of the inputs at the time the function is invoked, and not the time that the page was loaded. And scoping the getElementById outside of the alertHours function still gives you access to those elements should you need to use them somewhere else in code. There are more clever/eloquent ways to do this still, but this should work.