Jump to content

Adding Events To Elements.

clonetrooper9494

By clonetrooper9494
in JavaScript

Recommended Posts

clonetrooper9494 Member

clonetrooper9494

Posted
Posted

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?

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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>

Link to comment
Share on other sites
clonetrooper9494 Member

clonetrooper9494

Posted
  • Author
Posted

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?

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted
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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...