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

Question

我似乎无法获得JavaScript来添加HTML页面中的元素。 我有语法错误吗？

 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

调用alertHours函数时，必须检索表单数据。

问题是您在一开始就检索了表单数据，而这些数据是未定义的。

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

当您看到parseFloat(...) || 0 parseFloat(...) || 0 ，表明：如果输入为空，我将为此输入设置0值。

Answer 2

您正在获取页面加载时的值并将其存储在变量中。 由于那时它们是无价的，所以您没有得到预期的结果。 我建议以下选项...

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);
}

这样，您将在调用函数时而不是在页面加载时获取输入值。 而且，如果需要在代码中的其他地方使用它们，则在alertHours函数之外对getElementById进行作用域设置仍然可以使您访问这些元素。 还有更多聪明/雄辩的方法可以做到这一点，但这应该行得通。