Jump to content

Adding Events To Elements.


clonetrooper9494
 Share

Recommended Posts

How would I add an event listener to an element while passing parameters through the function? I have this script that am working on:

<html><head><title>Javascript Tab Thing</title><script type="text/javascript">var test;function createTabGroup(elmntid){  this.handle = document.getElementById('tabgroup1');  var tmp = this.handle.getElementsByTagName('span');  this.len = tmp.length  this.tabs = new Array();  this.openTab1 = function(leb){alert(leb+'<-ggg->'+x);};  for(var x = 0; x < tmp.length; x++)  {    this.tabs[x] = new Object();    this.tabs[x].title = tmp[x];    this.tabs[x].html = this.handle.getElementsByTagName('div')[x];    this.tabs[x].title.addEventListener("click",this.openTab1,false);  }}function openTab(tabid){alert(tabid+'<-tabid | this.len->'+this.len);/*  for(x = 0; x < this.len; x++)  {    if(tabid == x)    {      this.tabs[x].html.style.display = 'block';      this.tabs[x].title.style.borderBottom = '0px solid black';    }    else    {      this.tabs[x].html.style.display = 'none';      this.tabs[x].title.style.borderBottom = '1px solid black';    }  } */}function temp123(){var test = new createTabGroup('tabgroup1');}</script><style type="text/css">.tabgroup{position:relative;}.tabgroup div{position:absolute;top:1.25em;border:1px solid black;margin:1px;display:none;}.tabgroup span{height:1.25em;float:left;background-color:white;margin:0px 0px 0px 15px;border:1px solid black;z-index:1;}</style></head><body onload="temp123()"><div class="tabgroup" id="tabgroup1">  <span>Title</span>  <div>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content. <br></div>  <span>Title</span>  <div>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content. <br></div>  <span>Title</span>  <div>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content. <br></div>  <span>Title</span>  <div>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content.<br>Body Content. Body Content. Body Content. Body Content. Body Content. <br></div></div></body></html>

http://clonedrone.com/php-lab/javascript_tab_thing.phpAnd it works fine, but i am trying to some how pass all of the 'this' variables to the onclick function... how would I do this? If I can get that working, then I can figure out how to do it to the function with the large comment (openTab()). Is there an alternitive way to add an onclick event to the spans?

Edited by CloneTrooper9494
Link to comment
Share on other sites

You can do the following:

element.onclick = function(e) {  somefunction("parameter1","parameter2",e);}

I have e there so that you can refer to the event object as well. For example, to refer to the element that triggered the event you use e.target (e.srcElement for Internet Explorer).

Link to comment
Share on other sites

heres my solution

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">.tabgroup{position:relative;}.tabgroup div{position:absolute;top:1.25em;border:1px solid black;margin:1px;display:none;}.tabgroup span{height:1.25em;float:left;background-color:white;margin:0px 0px 0px 15px;border:1px solid black;z-index:1;}</style><script type="text/javascript"><!--//function temp123(){var divcontainer = document.getElementById("tabgroup1");var spantitle = divcontainer.getElementsByTagName("span");divcontainer.getElementsByTagName("div")[0].style.display="block"; //shows first tab content by defaultvar totalspan = spantitle.length;for(var i=0; i<totalspan; i++){thistitle = spantitle[i].innerHTML;spantitle[i].innerHTML="<a href=\"java script: openTab("+i+")\">"+thistitle+"</a>";}}function openTab(tabid){var divcontainer = document.getElementById("tabgroup1");var divcontent = divcontainer.getElementsByTagName("div");var totaldivcontent = divcontent.length;for(var i=0; i<totaldivcontent; i++){if (i==tabid){divcontent[i].style.display="block";}else{divcontent[i].style.display="none";}}}//--></script></head><body onload="temp123()"><div class="tabgroup" id="tabgroup1"><span>Title</span><div>000000Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content. <br /></div><span>Title</span><div>1111111Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content. <br /></div><span>Title</span><div>2222222Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content. <br /></div><span>Title</span><div>3333333Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content.<br />Body Content. Body Content. Body Content. Body Content. Body Content. <br /></div></div></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

Thanks dsonesuk, I will think about doing that instead of adding the event using element.onclick or attachEvent()@Ingolme: I made a script to see if I could use element.onclick, but it didn't work:

<html><head><title>Click Test</title><script type="text/javascript">function test(){document.getElementById('clck').onclick = alert('a');}</script></head><body onload="test()"><span id="clck">kk</span></body></html>

It just alerts 'a' as soon as I load the page, and not when I click on the element. What am I doing wrong?

Edited by CloneTrooper9494
Link to comment
Share on other sites

Thanks dsonesuk, I will think about doing that instead of adding the event using element.onclick or attachEvent()@Ingolme: I made a script to see if I could use element.onclick, but it didn't work:
<html><head><title>Click Test</title><script type="text/javascript">document.getElementById('clck').onclick = alert('a');</script></head><body><span id="clck">kk</span></body></html>

It just alerts 'a' as soon as I load the page, and not when I click on the element. What am I doing wrong?

You're running the function and assigning the result to the onclick event.You need to pass the function itself or a reference to it, like this:
document.getElementById('clck').onclick = function() { alert('a'); }

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...