Javascript unobtrusive?

@Kaiser28Jan 18.2008

Hi all,

I have a page with a few tabs and i am trying to get rid of the onclick links i have inside the html but i am really getting confused:

inside my HTML i have this code:

<ul id=”tabs”>
<li id=”tab0″ class = “Selected” onmouseover=”style.cursor=’pointer’;”><a><center>Product Summary</center></a></li>
<li id=”tab1″ class = “NotSelected” onmouseover=”style.cursor=’pointer’;”><a><center>Tech Specification</center></a></li>
<li id=”tab2″ class = “NotSelected” onmouseover=”style.cursor=’pointer’;”><a><center>Essential Extras</a></center></li>
<li id=”tab3″ class = “NotSelected” onmouseover=”style.cursor=’pointer’;”><a><center>Product Feedback</a></center></li>
</ul>

than in my javascript i have this:
window.onload = prepareTabLinks();

i am using firebug to debug the javascript…. can anyone tell me why the links is not getting any li tags?? when i debug it with firebug the links variable remains empty.

Thanks

to post a comment

JavaScript

9 Comments(s) _↴

@cgishackJan 18.2008 — #I have seen this before and also read some article about it.

I cant remember what is causing the issue though..

I think my solution was to apply the onclick in a different function..

The code below does not work, but i think this is how i kind of did it.

<i>
 </i>function prepareTabLinks()
 {
 var links = document.getElementsByTagName("li");
 for(var i = 0; i &lt; links.length; i++)
 {
 if(links[i].className == "NotSelected" || links[i].className == "Selected")
 {
 
 <i>	</i>		[COLOR="Red"]ApplyOnClickEvent(links[i])[/COLOR]
 <i>	</i>	}
 <i>	</i>}
 }
 
 [B]function ApplyOnClickEvent(theElement)
 {
 theElement.onclick = function(){ ChangeTab(); }
 }
 [/B]

Drew

@Kaiser28authorJan 21.2008 — #thx for the post i think with your method it seems that it's working.

another question pls:

what does the "liLink.onclick = function()" do in reality? it attaches a link (like when you type <li onclick></li) to the link and points it to a function?

Thanks

@KorJan 21.2008 — #Within a loop you can not pass directly the index of an element via a function as argument, because you will get always the last value of the index in that loop (as the loop ends before you call that function).

One solution is to set a custom property to the elements, and to use a [B]closure[/B]

<i>
 </i>...
 element.[COLOR="Blue"]ind[/COLOR]=i;
 element.onclick=function(){alert([B]this[/B].[COLOR="Blue"]ind[/COLOR])}
 ...

@Kaiser28authorJan 21.2008 — #OMG i think i solved the problem.

The prepareLinks function has to be made in the HTML head of the document and called from the body tag of the html and now is working correclty.

Just to be certain can anyone confirm this? and do All the initialize functions have to be in the head of the HTML to work?

thanks

@KorJan 21.2008 — #You have called the function incorrectly.

<i>
 </i>window.onload = prepareTabLinks[B][COLOR="Red"]()[/COLOR][/B];

Either you call it as a variable:

<i>
 </i>window.onload = prepareTabLinks;

or as a function within an anonymous:

<i>
 </i>window.onload = function(){prepareTabLinks()}

@Kaiser28authorJan 21.2008 — #kor,

this is quite confusing..

when i do:

<i>
 </i>window.onload = prepareLinks;
 
 function prepareLinks(){
 }

This doesnt work, (i have a breakpoint in firebug to check if the prepareLinks function is being called and its not)

when i do the brackets it works.

quite confusing since in everybook of javascript i have evryone uses the one without brackets.

@KorJan 21.2008 — #How many function do you call on using window.onload ? Should be only one... If you need more than one to be called you need an anonymous:

<i>
 </i>onload=function(){
 prepareTabLinks();
 prepareLinks();
 }

An make sure you do not call another function onload from within the BODY element (which is equivalent with window.onload as well)

@Kaiser28authorJan 21.2008 — #oopssss

That was the problem... calling another function from the body......

@KorJan 21.2008 — #Should work. There must be another javascript error some other place... Can we see the whole picture?

Also in #JavaScript _↴

Issues comparing a text string to a varible Need help with cookies Correct term?

Success!

Help @Kaiser28 spread the word by sharing this article on Twitter...

Tweet This

Javascript unobtrusive?

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript unobtrusive?

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴