Inconsistent JavaScript Function Results

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

Eric Wendelin · Accepted Answer · 2008-10-16 01:37:35Z

2

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.

edited Oct 16, 2008 at 1:37

answered Oct 15, 2008 at 21:26

Eric Wendelin

44.5k9 gold badges73 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

objectivesea Over a year ago

I thought the same thing, and searched the document for duplicate entries. As far as I can tell there is only one element with the id of 'cost'. There is however an element with the name attribute 'cost'. I have tried changing this to 'price'. Still the problem remained.

Eric Wendelin Over a year ago

Interesting, actually I think there was some weird bit in IE where document.getElementById() gets elements matching the name attribute as well. I'll see what I can do with your link

objectivesea Over a year ago

Your answer was correct, but either you or some kind of moderator deleted it. I'll still give you the credit for the answer. For anyone watching this, Eric basically told me to call the function holiday(), or unholiday() (whichever is appropriate) to set the values before updating the fields.

DocileWalnut · Accepted Answer · 2008-10-15 21:51:01Z

1

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.

answered Oct 15, 2008 at 21:51

DocileWalnut

2711 silver badge10 bronze badges

Comments

Benry · Accepted Answer · 2008-10-15 22:42:29Z

0

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.

answered Oct 15, 2008 at 22:42

Benry

5,2981 gold badge27 silver badges25 bronze badges

1 Comment

objectivesea Over a year ago

bill.calculate() only totals the current costs. It doesn't change what values are being totaled. It still totals the same wrong value until the subtotals are accurate.

objectivesea · Accepted Answer · 2008-10-15 23:28:35Z

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

Collectives™ on Stack Overflow

Inconsistent JavaScript Function Results

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related