Question

I have this function in my Javascript Code that updates html fields with their new values whenever it is called. The problem cannot be with the function itself because it works brilliantly in every section except for one. Here is the JS function:

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

And it executes fine in the following instance:

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

but in this very similar code, the last line of the function doesn’t seem to execute (it doesn’t update the cost field, but updates everything else)

  <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 /> 

Strangely enough, the total cost variable itself is updated, but the field that represents the variable is not. If you use another section of the page that wouldn’t change the value of the total cost but calls the updateFields function again, the cost field then updates correctly. It must be an issue with the function called.

Note: we know that the function executes because it does 5 out of 6 of the things it is supposed to do. This is a strange issue.

Edit: The pastebin for the entire page my be helpful. Here it is:

http://pastebin.com/f70d584d3

Answer 1

I’m curious, is it possible that there are actually 2 elements with an id of ‘cost’? That could, by updating the first one it finds, cause this issue. Different browsers may have different ways of implementing document.getElementById() so you might get even more inconsistent results with different browsers if this is the case.

UPDATE: It turns out that you need to call bill.holiday() or bill.unholiday() before calling updateFields() in your second select.