无法使用 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 时，这告诉您：好的，如果输入为空，我将为该输入设置 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);
}

这样您就可以在调用函数时获取输入值，而不是在加载页面时获取输入值。如果您需要在代码中的其他地方使用这些元素，那么将 getElementById 的范围限定在 alertHours 函数之外仍然可以让您访问这些元素。还有更多 clever/eloquent 方法可以做到这一点，但这应该可行。

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

can't add elements from form, using getElementByID

javascript

getelementbyid