AddEventListener - Codewalkers

Codewalkers Forums Sponsor:

March 23rd, 2009, 11:18 AM

Osiris

Contributing User

Join Date: May 2008

Location: Sussex

Posts: 566

Time spent in forums: 1 Week 2 Days 19 h 54 m 33 sec
Reputation Power: 2

AddEventListener

Hey guys, I don't like it when this happens, you have a piece of code, it works perfectly, you copy it over and it stops working lol.

I'm trying to change the onclick event of an element, and it is not. It works fine with a button, however with the TD tag which is what I am trying to apply it to does not work.

Code:

//orig code
	var t = document.getElementById("setbut");
	t.value = "Set Pieces";
    	t.onclick=null;
	if (window.addEventListener) { 	// Mozilla, Netscape, Firefox
		t.addEventListener('click', startGame, false);
	}
	else {	// IE
		t.attachEvent('onClick', startGame);
	}

//end of orig

//now I move this code into a loop for the cells I need changing

//new code
			t = document.getElementById(i+tmpA[bn]+ii);
			t.onclick=null;
			if (window.addEventListener) {	// Mozilla, Netscape, Firefox
				t.addEventListener('click', bombard, false);
				if(i==10 && ii==10) alert(t.click); ;
			}	
			else {
				img.attachEvent('onClick', bombard);
			}

//end new code

Now I know the right parti is being called, due to the alert in the first if statement, however it just shows "undefined". So can I not use this to change the onclick of a td?

__________________
~~==~~ Whoever said nothing is impossible never tried pushing a revolving door ~~==~~

March 23rd, 2009, 11:22 AM

Osiris

Contributing User

Join Date: May 2008

Location: Sussex

Posts: 566

Time spent in forums: 1 Week 2 Days 19 h 54 m 33 sec
Reputation Power: 2

Oh, never mind, it is working, I was just expecting the change to show in firebug aswell

March 23rd, 2009, 11:26 AM

jamestrowbridge

Contributing User

Join Date: Jul 2008

Location: Cleveland, Ohio, USA

Posts: 483

Time spent in forums: 5 Days 17 h 47 m 21 sec
Reputation Power: 2

haha. I would have suggested to wrap the tag with the <a> tag (sorta like applying CSS onmouseover & onmouseout to a form button)... but nevermind

__________________
Sir, a desire of knowledge is the natural feeling of mankind; and every human being, whose mind is not debauched, will be willing to give all that he has to get knowledge.

March 23rd, 2009, 11:38 AM

Osiris

Contributing User

Join Date: May 2008

Location: Sussex

Posts: 566

Time spent in forums: 1 Week 2 Days 19 h 54 m 33 sec
Reputation Power: 2

actually using this how would I tell it to use variables?

I tried t.addEventListener('click', bombard(this.id), false);

But that doesnt work

March 23rd, 2009, 11:46 AM

jamestrowbridge

Contributing User

Join Date: Jul 2008

Location: Cleveland, Ohio, USA

Posts: 483

Time spent in forums: 5 Days 17 h 47 m 21 sec
Reputation Power: 2

if you use 'this' what does it use? I thought 'this' meant the current element doesn't matter what the ID or Name is.... but not sure.

March 23rd, 2009, 11:49 AM

Osiris

Contributing User

Join Date: May 2008

Location: Sussex

Posts: 566

Time spent in forums: 1 Week 2 Days 19 h 54 m 33 sec
Reputation Power: 2

Well to start with the td is like this

<td id="1-1" onclick="thiscell(this.id)">

but then I click the link I need it to go to

<td id="1-1" onclick="bombard(this.id)">

So that the id of the clicked cell is available to the bombard function.

March 23rd, 2009, 12:00 PM

jamestrowbridge

Contributing User

Join Date: Jul 2008

Location: Cleveland, Ohio, USA

Posts: 483

Time spent in forums: 5 Days 17 h 47 m 21 sec
Reputation Power: 2

I know you are better at JS/DOM than I am, but I will try to help the best I can. Not sure if my suggestions will be useful or not.

Can you post your bombard function?

If it's like:

function bombard(x) {

}

try to add:

alert(x);

to the top of it to see what is being passed to the function.

March 23rd, 2009, 12:44 PM

Osiris

Contributing User

Join Date: May 2008

Location: Sussex

Posts: 566

Time spent in forums: 1 Week 2 Days 19 h 54 m 33 sec
Reputation Power: 2

I get "undefined" if I do that.

March 23rd, 2009, 01:02 PM

jamestrowbridge

Contributing User

Join Date: Jul 2008

Location: Cleveland, Ohio, USA

Posts: 483

Time spent in forums: 5 Days 17 h 47 m 21 sec
Reputation Power: 2

So in your single element you have both?:
onclick="thiscell(this.id); bombard(this.id);"

and only 'thiscell()' works (correctly)?

#10

March 23rd, 2009, 01:11 PM

Osiris

Contributing User

Join Date: May 2008

Location: Sussex

Posts: 566

Time spent in forums: 1 Week 2 Days 19 h 54 m 33 sec
Reputation Power: 2

no, when the page is loaded the element has an onclick="thiscell(this.id)"

But after a function is called I need it to change to

onclick="bombard(this.id)"

#11

March 23rd, 2009, 01:31 PM

jamestrowbridge

Contributing User

Join Date: Jul 2008

Location: Cleveland, Ohio, USA

Posts: 483

Time spent in forums: 5 Days 17 h 47 m 21 sec
Reputation Power: 2

In your bombard function set you element (x as I've referred to it previously) to this.id and erase the x from:
function bombard(x) {

}

so it becomes

PHP Code:


		
			
function bombard() {



var x = document.getElementById(this.id);



//also alert out the id

alert(this.id);



}

What do you get with that? -- this isn't going to work, ignore this post...

Last edited by jamestrowbridge : March 23rd, 2009 at 01:45 PM. Reason: nevermind

#12

March 23rd, 2009, 01:55 PM

jamestrowbridge

Contributing User

Join Date: Jul 2008

Location: Cleveland, Ohio, USA

Posts: 483

Time spent in forums: 5 Days 17 h 47 m 21 sec
Reputation Power: 2

In your first post, should:
img.attachEvent('onClick', bombard);

be:
t.attachEvent('onClick', bombard);

#13

March 23rd, 2009, 02:12 PM

jamestrowbridge

Contributing User

Join Date: Jul 2008

Location: Cleveland, Ohio, USA

Posts: 483

Time spent in forums: 5 Days 17 h 47 m 21 sec
Reputation Power: 2

Have a look here: This seems like that issue you are having, possibly solved? http://www.captain.at/howto-addeven...-parameters.php

#14

March 23rd, 2009, 02:30 PM

jamestrowbridge

Contributing User

Join Date: Jul 2008

Location: Cleveland, Ohio, USA

Posts: 483

Time spent in forums: 5 Days 17 h 47 m 21 sec
Reputation Power: 2

Forget that crap I just posted, give me 5 min.

#15

March 23rd, 2009, 02:48 PM

jamestrowbridge

Contributing User

Join Date: Jul 2008

Location: Cleveland, Ohio, USA

Posts: 483

Time spent in forums: 5 Days 17 h 47 m 21 sec
Reputation Power: 2

This will only fix it for everything besides IE - I'm still working on it though (EDIT: SEE PAGE 2)

Code:

//orig code
	var t = document.getElementById("setbut");
	t.value = "Set Pieces";
    	t.onclick=null;
	if (window.addEventListener) { 	// Mozilla, Netscape, Firefox
		t.addEventListener('click', startGame, false);
	}
	else {	// IE
		t.attachEvent('onClick', startGame);
	}

//end of orig

//now I move this code into a loop for the cells I need changing

//new code
			t = document.getElementById(i+tmpA[bn]+ii);
			t.onclick=null;
			if (window.addEventListener) {	// Mozilla, Netscape, Firefox
//changed some stuff in the line below:
				t.addEventListener('click', function() { bombard(i+tmpA[bn]+ii); }, false);
				if(i==10 && ii==10) alert(t.click); ;
			}	
			else {
                                                   img.attachEvent('onClick', bombard);
			}

//end new code

Last edited by jamestrowbridge : March 23rd, 2009 at 03:52 PM.

Page 1 of 2

Viewing: Codewalkers Forums > Other Technologies > Client Side Things > AddEventListener

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump

Free IT White Papers!

Create the Optimal Architecture for your Critical Applications
Warburton's the largest independently owned bakery in the UK faced a number of difficult challenges in providing the most robust yet efficient IT infrastructure for their organization's success. IBM's services combined with their xSeries servers created the perfect platform for their SAP environment with sufficient flexibility, and did so in very time effective fashion.
Request Your Free Technology Downloads!

Five Best Practices for Deploying a Successful Service-Oriented Architecture
This white paper describes the benefits you can expect with SOA, and how IBM can help take your business there.
Request Your Free Technology Downloads!

Gartner Magic Quadrant for Application Delivery Controllers
Gartner summarizes its view on Application Delivery Controllers, evaluates strengths and weaknesses of solutions, and provides Magic Quadrant reporting for a quick comparison across all vendors. Learn from Gartner how you can benefit from an all-in-one device like Citrix NetScaler that delivers the highest levels of availability, performance and security.
Request Your Free Technology Downloads!

Knowledge is Power
What you don't know can hurt you, and is likely costing you money and increasing your security risks during an era of scarce resources. This white paper proposes six key strategies that enterprise security managers can use to improve their network defense posture.
Request Your Free Technology Downloads!

Rationalizing the Multi-Tool Environment
The rationalized multi-tool approach is flexible, scalable and cost effective. It provides the necessary input to the IT service management business processes. It preserves prior investments in monitoring tools, empowers technologists to select the best tools with which to do their jobs, and enhances effective response to incidents.
Request Your Free Technology Downloads!

More Free IT White Papers!