Strange JavaScript problem - getElementById not working unless I alert()

[bfsog]

I have a strange problem where my call to document.getElementById() does not work unless I put alter("whatever"); above the getElementById line.

Description: This is on an ecommerce website which uses JavaScript to change the products listed/add to basket (it is pretty nasty but I must make do).

So, when the user is selecting their shipping method via a <select></select> control I have a onchange handler which calls SetChosenCarriage.

Here is the function:

function setChosenCarriage(elem)
{
  var dhlPos = chosenCarriage.indexOf('DHL ');
  if(dhlPos >= 0)
  {
    alert(elem.id); // Need this line
    document.getElementById(elem.id).selectedIndex = document.getElementById(elem.id).selectedIndex + 1;
  }
}

In the above chosenCarriage is assigned to the chosen select value in a different function (there are 2 functions called onchange).

If I remove the alert line my script crashes and burns but with it the selectedIndex jumps to the second (1) which is the DHL shipping method.

For obvious reasons I do not want the alert to show.

Any idea?

[smoseley]

Try this:

function setChosenCarriage(elem) {
  var dhlPos = chosenCarriage.indexOf('DHL ');
  if(dhlPos >= 0) {
    var elemId = elem.id;
    if (elemId) {
      var selectBox = document.getElementById(elem.id);
      if (selectBox) {
        selectBox.selectedIndex = selectBox.selectedIndex + 1;
      } else {
        window.alert('Invalid select box specified.');
      }
    } else {
      window.alert('Invalid element id specified.');
    }
  }
}

[bfsog]

Thanks for the snippet smoseley, unfortunately when I invoke the onchange event I get the alert("Invalid select box specified");.

However if I amend your code to

function setChosenCarriage(elem) {
  var dhlPos = chosenCarriage.indexOf('DHL ');
  if(dhlPos >= 0) {
    var elemId = elem.id;
    if (elemId) {
      alert(elem.id); // added this line
      var selectBox = document.getElementById(elem.id);
      if (selectBox) {
        selectBox.selectedIndex = selectBox.selectedIndex + 1;
      } else {
        window.alert('Invalid select box specified.');
      }
    } else {
      window.alert('Invalid element id specified.');
    }
  }
}

It works but obviously the alert is surplus to requirements.

Join me in a harmonised saying of "Weird"

[smoseley]

can you post the html?

[smoseley]

Oh wait, lol... I screwed up my code (used elem.id where I should have used elemId).

Try this...

function setChosenCarriage(elem) {
  var dhlPos = chosenCarriage.indexOf('DHL ');
  if(dhlPos >= 0) {
    var elemId = elem.id;
    if (elemId) {
      var selectBox = document.getElementById(elemId);  // Changed this - important
      if (selectBox) {
        selectBox.selectedIndex = selectBox.selectedIndex + 1;
      } else {
        window.alert('Invalid select box specified.');
      }
    } else {
      window.alert('Invalid element id specified.');
    }
  }
}

[smoseley]

The important part of that change is that it uses the derived value rather than the object property as the getElementById param. I think getElementById may not work with an object propery reference.

[bfsog]

Thanks for your continued help.

From your first and second snippet I have a question. What is the difference between:

var selectBox = document.getElementById(elem.id);

and

var elemId = elem.id
var selectBox = document.getElementById(elemId);

Both point to the same control/element do they not?

Either way I have tried your latest snippet and still no luck.

The HTML is

<select name="shippingOption" id="shippingOption" onchange="setChosenCarriage(this);">
  <option value="">Select your shipping method</option>
  <option value="dhl">DHL £6.69</option>
  <option value="royalmail">ROYAL MAIL £3.29</option>
</select>

I am totally baffled.

[smoseley]

Ok, heh... seeing the last bit, I see what your code is doing. Not sure why elem.id isn't working right, but since you're passing the element as an object, there's no need to use getElementById at all!!!

Try this:

function setChosenCarriage(elem) {
  if(chosenCarriage.indexOf('DHL ') >= 0)  {
    elem.selectedIndex = elem.selectedIndex + 1;
  }
}

[bfsog]

I did some digging and think it is the other function that is messing it up. As I said in a previous post the onchange hook calls 2 functions, the first refreshes the view (it is messy) so I think the selectedIndex is not being set and maybe the element is not created/being recreated when the second function is called.

To test this I removed the first function call (so there is no refresh and it just works like a normal <select> and voila.

Unfortunately it means I will have to review how the pages work together to fix this, but thanks for your help.