<div>
You can use target.addEventListener(type, listener, useCapture); for FF 
and el.attachEvent('onclick', l_func) for IE. 
 

<pre><code class="code-1 nolinks" id="code-263195"> &lt;input type=&quot;text&quot; name=&quot;zipCode&quot; id=&quot;input1&quot; /&gt;
 
var el = document.getElementById('input1');
if (el.addEventListener){
 el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent){
 el.attachEvent('onclick', modifyText);
}
</code></pre>
</div>

<div>
Thanks phpmonkey.. does that work in IE6 aswell? 
 
Finally, can you think how I could list a bunch of input id's and attach the listener to all of them in one go, instead of repeating that code u posted for each input id 
 
Many thanks
</div>

<div>
Nice. We need more experts like you here on EE. 
 
Points coming your way. 
 
Thanks for the help.
</div>

<div>
o poop. 
 
el is null 
 
alert(arrIds[i]); 
&nbsp;var el = document.getElementById(arrIds[i]); 
&nbsp;alert(el); 
 
 
any ideas?
</div>

<div>
I think it expects el to be an object but its not... so it throws a fit when it tries to add the listener to el???
</div>

<div>
does the input has the correct id tags applied?
</div>

<div>
yeah the inputs have the correct id's :/
</div>

<div>
could you perhaps post some of the updated code (js and html) so i can try and see?
</div>

<div>
Sure: 
 
html: 
 
&lt;div class=&quot;fieldsHolder&quot;&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;field_left&quot;&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label for=&quot;firstName&quot; class=&quot;req&quot;&gt;First Name&lt;/label&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;text&quot; name=&quot;firstName&quot; /&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;field_right&quot;&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label for=&quot;lastName&quot; class=&quot;req&quot;&gt;Last Name / Surname&lt;/label&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;text&quot; name=&quot;lastName&quot; id=&quot;lastName&quot; /&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;p class=&quot;fieldTip&quot; id=&quot;lastNameTip&quot;&gt;Your last name will not be shown on the site, but it's required for Trust-ID certification.&lt;/p&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;fieldsHolder&quot;&gt; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;field_left&quot;&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label for=&quot;emailAddress&quot; class=&quot;req&quot;&gt;Email Address&lt;/label&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;text&quot; name=&quot;emailAddress&quot; id=&quot;emailAddress&quot; /&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;field_right&quot;&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label for=&quot;emailConfirm&quot; class=&quot;req&quot;&gt;Confirm Address&lt;/label&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;text&quot; name=&quot;emailConfirm&quot; id=&quot;emailConfirm&quot; /&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class=&quot;fieldTip&quot; id=&quot;emailTip&quot;&gt;Your valid email address is required for us to send you your password, FastMatch and Hot List emails.&lt;/p&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; 
 
 
 
js: 
 
var arrIds = new Array(); 
arrIds[0] = &quot;lastName&quot;; 
arrIds[1] = &quot;emailAddress&quot;; 
arrIds[2] = &quot;emailConfirm&quot;; 
&nbsp; 
for(var i=0;i&lt;arrIds.length;i++){ 
&nbsp;alert(arrIds[i]); /* alerts &quot;lastName&quot; */ 
&nbsp;var el = document.getElementById(arrIds[i]); &nbsp;&lt;----- problem here - el is null, object required 
&nbsp;alert(el); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* alerts &quot;null&quot; */ 
&nbsp;if (el.addEventListener){ 
&nbsp; el.addEventListener('focus', showTip, false); 
&nbsp; el.addEventListener('blur', hideTip, false); 
} else if (el.attachEvent){ 
&nbsp; el.attachEvent('onfocus', showTip); 
&nbsp; el.attachEvent('onblur', hideTip); 
} 
}
</div>

<div>
Im using jquery on the page aswell... could that be interfering with the getElementById???
</div>

<div>
 alert(arrIds[i]); 
&nbsp;var el = $(arrIds[i]); 
&nbsp;alert(el); 
 
that works... but event listeners dont fire my show hide functions... guess that could be to do with jquery aswell?
</div>

<div>
the trick is to wrap your current code in a function and call that function in the body tag (onLoad). 
 
problem was the element wasn't on the page yet when the script was executed. 

<pre><code class="code-10 nolinks" id="code-263212">&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var arrIds = new Array();
arrIds[0] = &quot;lastName&quot;;
arrIds[1] = &quot;emailAddress&quot;;
arrIds[2] = &quot;emailConfirm&quot;;
function attachHandlers(){ 
for(var i=0;i&lt;arrIds.length;i++){
 alert(arrIds[i]); /* alerts &quot;lastName&quot; */
 var el = document.getElementById(arrIds[i]); 
 alert(el); /* alerts &quot;null&quot; */
 if (el.addEventListener){
 el.addEventListener('focus', showTip, false);
 el.addEventListener('blur', hideTip, false);
} else if (el.attachEvent){
 el.attachEvent('onfocus', showTip);
 el.attachEvent('onblur', hideTip);
}
}
}
&lt;/script&gt;
&lt;body onLoad=&quot;attachHandlers()&quot;&gt;
 
 
 
 
 
 
&lt;div class=&quot;fieldsHolder&quot;&gt;
 &lt;div class=&quot;field_left&quot;&gt;
 &lt;label for=&quot;firstName&quot; class=&quot;req&quot;&gt;First Name&lt;/label&gt;
 &lt;input type=&quot;text&quot; name=&quot;firstName&quot; /&gt;
 &lt;/div&gt;
 &lt;div class=&quot;field_right&quot;&gt;
 &lt;label for=&quot;lastName&quot; class=&quot;req&quot;&gt;Last Name / Surname&lt;/label&gt;
 &lt;input type=&quot;text&quot; name=&quot;lastName&quot; id=&quot;lastName&quot; /&gt;
 &lt;/div&gt;
 &lt;p class=&quot;fieldTip&quot; id=&quot;lastNameTip&quot;&gt;Your last name will not be shown on the site, but it's required for Trust-ID certification.&lt;/p&gt;
 &lt;/div&gt;
 
 &lt;div class=&quot;fieldsHolder&quot;&gt; 
 &lt;div class=&quot;field_left&quot;&gt;
 &lt;label for=&quot;emailAddress&quot; class=&quot;req&quot;&gt;Email Address&lt;/label&gt;
 &lt;input type=&quot;text&quot; name=&quot;emailAddress&quot; id=&quot;emailAddress&quot; /&gt;
 &lt;/div&gt;
 &lt;div class=&quot;field_right&quot;&gt;
 &lt;label for=&quot;emailConfirm&quot; class=&quot;req&quot;&gt;Confirm Address&lt;/label&gt;
 &lt;input type=&quot;text&quot; name=&quot;emailConfirm&quot; id=&quot;emailConfirm&quot; /&gt;
 &lt;/div&gt;
 &lt;p class=&quot;fieldTip&quot; id=&quot;emailTip&quot;&gt;Your valid email address is required for us to send you your password, FastMatch and Hot List emails.&lt;/p&gt;
 &lt;/div&gt;
 
 
 
 
 
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>

<div>
Just tested it in IE &amp;&nbsp;FF (i have no IE6 though) and works in both browsers. 
You can use &quot;this&quot; as element in the show/hideTip function in IE as wel as FF too i just checked :D
</div>

<div>
Thanks phpmonkey. 
 
Im going to open another question as how to do this in jquery... as this solution doesnt seem to work with the jquery i have attached on the page :/ 

</div>

<div>
<div class="content wysiwyg-content">
Hello, 
 
I made a little script to show and hide tips when focusing and blurring certain fields, currently I'm doing inline events to call the functions: 
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;text&quot; name=&quot;zipCode&quot; onFocus=&quot;showTip(this.name)&quot; onBlur=&quot;hideTip(this.name)&quot; /&gt; 
 
is it possible to make this cleaner so that I dont have to have the onFocus and onBlur in the tags? Only some of the inputs call the function though. 
 
Thanks 

</div>
</div>

Hello,

I made a little script to show and hide tips when focusing and blurring certain fields, currently I'm doing inline events to call the functions:

 <input type="text" name="zipCode" onFocus="showTip(this.name)" onBlur="hideTip(this.name)" />

is it possible to make this cleaner so that I dont have to have the onFocus and onBlur in the tags? Only some of the inputs call the function though.

Thanks

Javascript event listeners

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.