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

这样您就可以在调用函数时获取输入的值，而不是页面加载的时间。如果您需要在代码中的其他位置使用它们，那么在alertHours函数之外设置getElementById仍然可以访问这些元素。还有更聪明/有说服力的方法可以做到这一点，但这应该有效。

无法使用getElementByID

2 个答案: