...

View Full Version : addEventListener problem



jonnyrzero
01-28-2009, 05:23 AM
Does anybody know why this wont work for me? :confused:

I am trying to hide the second drop down if "4+" is chosen in the first drop down.

I need to use addEventListener for this.

Thanks for your help! :thumbsup:

<script language="JavaScript">

function attachHandlers() {
var ELMX = document.getElementById('Q5a_1');
if (document.addEventListener){
ELMX.addEventListener("change", close_other_box, false);
} else {
ELMX.attachEvent("onchange", close_other_box);
}
}

attachHandlers();

function close_other_box(){
if(document.getElementById('Q5a_1').selectedIndex==5){
document.getElementById('Q5b_1').disabled=true}
else{
document.getElementById('Q5b_1').disabled=false}}

</script>




<table><tr>
<td><font face="verdana" size="-1" color="#990033">Home to work:</font>&nbsp;</td>
<td align="center">&nbsp;&nbsp;<select tabindex="1" name="Q5a_1" id="Q5a_1">
<option value="">Please select your answer</option>
<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>
</select>
</td>
<td align="center">&nbsp;&nbsp;<select tabindex="2" name="Q5b_1" id="Q5b_1">
<option value="">Please select your answer</option>
<option value="1">0-9</option>
<option value="2">10-19</option>
<option value="3">20-29</option>
<option value="4">30-39</option>
<option value="5">40-49</option>
<option value="6">50-59</option>
</select>
</td>
</tr>

</table>

rangana
01-28-2009, 07:44 AM
It's because your function is running even if your page haven't been fully loaded yet.

This part:


attachHandlers();


...should be replaced with:


onload=attachHandlers;


...or if you want to use DOM 2.0 way...

Then:


window.addEventListener?window.addEventListener('load',attachHandlers,false):
window.attachEvent('onload',attachHandlers);

jonnyrzero
01-28-2009, 10:47 PM
Thanks for your help. :)

I have got it to work in firefox, but it wont work in IE. :mad:

I created a function so that I can use it for multiple drop-downs if need be.

Do you have any idea why this wont work in IE ??? :confused:

Here is the new code:

<script language="JavaScript">

function AttachEvent(obj,evt,evtb,fnc,useCapture){
if (obj.addEventListener){
obj.addEventListener(evt,fnc,useCapture);
return true;
}else{
obj.attachEvent(evtb,fnc);
return true;
}
}


window.onload=AttachEvent(window,'change', 'onchange', close_other_box, false);

function close_other_box(){
if(document.getElementById('Q5a_1').selectedIndex==5){
document.getElementById('Q5b_1').disabled=true}
else{
document.getElementById('Q5b_1').disabled=false}}

</script>

<table><tr>
<td><font face="verdana" size="-1" color="#990033">Home to work:</font>&nbsp;</td>
<td align="center">&nbsp;&nbsp;<select tabindex="1" name="Q5a_1" id="Q5a_1">
<option value="">Please select your answer</option>
<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>
</select>
</td>
<td align="center">&nbsp;&nbsp;<select tabindex="2" name="Q5b_1" id="Q5b_1">
<option value="">Please select your answer</option>
<option value="1">0-9</option>
<option value="2">10-19</option>
<option value="3">20-29</option>
<option value="4">30-39</option>
<option value="5">40-49</option>
<option value="6">50-59</option>
</select>
</td>
</tr>

</table>

rangana
01-29-2009, 12:51 AM
The obj that you would refer should be the ID of the select element, and not the window.

...with that said, change this part:


window.onload=AttachEvent(window,'change', 'onchange', close_other_box, false);



...to:


window.onload=function(){
AttachEvent(document.getElementById('Q5a_1'),'change', 'onchange', close_other_box, false);
}


Hope that helps.

jonnyrzero
01-29-2009, 01:41 AM
Brilliant! Thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum