getElementById problem on IE

[jaapkramer]

I have this function which changes the image according to a selection
which is made by a select box.

This is all working great with Firefox and on a Mac. But it refuses to
work in IE. In IE it will change the source, but the image isn't
replaced (still get it?)
So i change the source to order1.gif, but order0.gif is still
displayed.

<select name=\"prior22345\" class=\"noprint\"
onChange=\"javascript:changePrior(22345)\" id=\"22345\">
<option value=\"0\">0</option>
<option value=\"1\">1</option>
<option value=\"2\">2</option>
<option value=\"3\">3</option>
<option value=\"4\">4</option>
<option value=\"5\">5</option>
<option value=\"6\">6</option>
<option value=\"7\">7</option>
<option value=\"8\">8</option>
</select>

this is the image i'm changing:

<img src='images/icons/order0.gif' id='prior22345'>

the function i'm executing:

function changePrior( waid )
{
prioriteit = document.getElementById( waid ).value;
document.getElementById('prior'+ waid).src = 'images/icons/order' +
prioriteit + '.gif';
checker();
}
\

 

[jaapkramer]

I probably found the problem.
I have a form around the image and select box. If i remove it the
function is working great.

But i can't remove the form tags because other functions will stop
working instead. Is theire a way around my problem?

 

[jaapkramer]

You are right, stupid that i didn't noticed that. Ohwell, most faults
are stupid ones.

Thank You for helping me out.

 

[Grant Wagner]

--
Grant Wagner <[email protected]>
comp.lang.javascript FAQ - http://jibbering.com/faq

wrote:

Have you heard of the 'cardboard programmer' technique? Get a
life-size
cardboard cut-out of another programmer (a stuffed toy, pot plant, or
in
emergencies a live human with no programming abilities will do equally
well), and explain to it in great detail exactly why it is your code
can't
possibly be failing. Almost invariably part way through the
explanation
you'll find the answer.

Variations on a theme:

http://www.sellsbrothers.com/spout/default.aspx?content=archive.htm#teddybear

"According to legend, the TA office next to the Stanford computer
science lab is guarded by a teddy bear. Before a student is allowed to
consume valuable time asking a question of the TA, they must first
explain it to the teddy bear. Apparently the bear is able to answer 80%
of the questions that students ask, saving time for the TAs to play
Unreal Tournament."

 

[Thomas 'PointedEars' Lahn]

<select name=\"prior22345\" class=\"noprint\"

^^ ^^ ^^ ^^

onChange=\"javascript:changePrior(22345)\" id=\"22345\">

^^ ^^ ^^ ^^

<option value=\"0\">0</option> ^^ ^^
<option value=\"1\">1</option> ^^ ^^
<option value=\"2\">2</option> ^^ ^^
<option value=\"3\">3</option> ^^ ^^
<option value=\"4\">4</option> ^^ ^^
<option value=\"5\">5</option> ^^ ^^
<option value=\"6\">6</option> ^^ ^^
<option value=\"7\">7</option> ^^ ^^
<option value=\"8\">8</option> ^^ ^^
</select>

How do you got the idea that you should escape
attribute value delimiters when used as such?

this is the image i'm changing:

<img src='images/icons/order0.gif' id='prior22345'>

That `img' element lacks the mandatory `alt' attribute.

the function i'm executing:

function changePrior( waid )
{
prioriteit = document.getElementById( waid ).value;
document.getElementById('prior'+ waid).src = 'images/icons/order' +
prioriteit + '.gif';

Use collections instead:

var e, prioriteit =
(e = document.forms[...].elements['prior' + waid])
.options[e.selectedIndex].value;

document.images['prior' + waid].src =
'images/icons/order' + prioriteit + '.gif';

This way you also work around issues with namespaces.

Don't use `javascript:' URIs in event handler attribute values but
declare the default scripting language instead using a `meta' element.


PointedEars