JavaScript 函数结果不一致

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.

Answer 2

My experience with getElementById has been mixed at best, and that's most likely your issue. Probably some sort of browser DOM bug where you've got two items with the same ID, or something like that.

I use Prototype which lets you avoid ambiguities and finicky browsers with a simple call:

document.getElementById('bf')

becomes

$('bf')

And similarly you can update the innerHTML of an element easily:

$('bf').update(bill.time[breakfast][bill.pointPartOfWeek]);

Check it out. It's saved my bacon more than a couple times.

Answer 3

The problem is that the cost property on the billiard object has not been updated when you call updateFields(). You need to call bill.calculate() which updates the cost property.

Answer 4

I understand now why Eric's solution worked... which lead me to a better solution.

His post was deleted for some reason, but I commented on his other post paraphrasing his answer.

Anyways, He said to call holiday() or unholiday(). When you look at those functions you'll see on the last line of code:

this.setRoom(this.pointPartOfDay,this.pointPartOfWeek);

Then everything starts to make sense. Before, I just set pointPartOfWeek to its new value and moved on. but pointPartOfDay is just an array address. I never actually updated the room cost. This also explains why cost eventually corrects itself. As long as pointPartOfWeek doesn't change, calls to setRoom will still fix the amount (even in another event).

The fun of debugging...