javascript - 不一致的 JavaScript 函数结果

Question

我的 Javascript 代码中有这个函数，它在调用时用新值更新 html 字段。问题不可能出在函数本身，因为除了一个部分，它在每个部分都表现出色。这是 JS 函数:

  function updateFields() {
    document.getElementById('bf').innerHTML = bill.time[breakfast][bill.pointPartOfWeek];
    document.getElementById('ln').innerHTML = bill.time[lunch][bill.pointPartOfWeek];
    document.getElementById('dn').innerHTML = bill.time[dinner][bill.pointPartOfWeek];
    document.getElementById('se').innerHTML = bill.time[special][bill.pointPartOfWeek];
    document.getElementById('fdr').innerHTML = bill.time[full][bill.pointPartOfWeek];
    document.getElementById('cost').innerHTML = bill.cost;
  }

它在以下实例中执行良好:

  <select onchange='if(this.selectedIndex == 0) {bill.unholiday();updateFields()} else { bill.holiday();updateFields()}' id='date' name='date'>
    <option value='else'>Jan. 02 - Nov. 20</option>
    <option value='christmas'>Nov. 20 - Jan. 01</option>
  </select>

但是在这个非常相似的代码中，函数的最后一行似乎没有执行(它不更新成本字段，但更新其他所有内容)

  <select onchange='if(this.selectedIndex == 0) {bill.pointPartOfWeek = 1;} else { bill.pointPartOfWeek = 2;}updateFields();alert(updateFields());' id='day' name='day'>
    <option value='0'>Monday thru Thursday</option>
    <option value='1'>Friday, Saturday, or Sunday</option>
  </select>
  <br />

奇怪的是，总成本变量本身被更新了，但代表该变量的字段却没有。如果您使用不会更改总成本值但再次调用 updateFields 函数的页面的另一部分，则成本字段会正确更新。一定是调用的函数有问题。

注意:我们知道该函数执行是因为它做了 6 件它应该做的事情中的 5 件。这是一个奇怪的问题。

编辑:整个页面的 pastebin 可能会有帮助。在这里:

http://pastebin.com/f70d584d3

Answer 1

我很好奇，是否有可能实际上有 2 个元素的 id 为“cost”？通过更新它找到的第一个，这可能会导致此问题。不同的浏览器可能有不同的实现 document.getElementById() 的方法，因此如果是这种情况，您可能会在不同的浏览器中得到更加不一致的结果。

更新:事实证明，您需要在第二次选择中调用 updateFields() 之前调用 bill.holiday() 或 bill.unholiday()。