solved: How to define actions for multiples buttons

Community Beginner ,
Mar 11, 2020 Mar 11, 2020

Copy link to clipboard

Copied

Hi, I'm totally nub in programming 

 

I know there must be a better way to set actions to my buttons but I do not figure it out yet.

 

 

 

image.clk1.addEventListener("click", clkAd1);

function clkAd1() {
    window.open(ad1[1], "_blank");
}


image.clk2.addEventListener("click", clkAd2);

function clkAd2() {
    window.open(ad2[1], "_blank");
}


image.clk3.addEventListener("click", clkAd3);

function clkAd3() {
    window.open(ad3[1], "_blank");
}

 

 

Please can enyone point me a better way to do this?

Thanks

TOPICS
Code, How to, Other, Performance

Views

250

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 12, 2020 Mar 12, 2020

Copy link to clipboard

Copied

Hi,

I would assume that the question refers to cases, when we need to create a bunch of identical buttons (for example - a "masonry" of image cards), with similar actions.
In such cases, I would create all buttons automatically, setting one function to listen to their click events, relying on something unique for each button.

For example (just idea, not tested):

 

 

for( var i = 0; i <= myImages.length; i++ ){
	myImages[i].addEventListener( "click", mainClickHandlerFunction );
}


function mainClickHandlerFunction( evtTarget ){
	switch( evtTarget.uniqueID ) {
	  case 1:
		window.open( "https://mywebsite.com", "_blank" );
		break;
	  case 2:
		window.open( "https://yourwebsite.com", "_blank" );
		break;
	  default:
		// code block
	}
}

 

 

- Vlad: UX and graphic design, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 01, 2020 Apr 01, 2020

Copy link to clipboard

Copied

LATEST

Thanks Vlad! 
I do not understand the switch(), but using an Array was really helpful, I've been got stucked focusing on one solution, not seeing alternatives ways to solve my problem.

 

This is my code:

var tl = this;
var ad = new Array;

ad[1] = "https://www.google.com/search?q=number+1"; 
ad[2] = ""; 
ad[3] = "https://www.google.com/search?q=number+3"; 
ad[4] = "https://www.google.com/search?q=number+4"; 
ad[5] = "https://www.google.com/search?q=number+5"; 
ad[6] = "https://www.google.com/search?q=number+6"; 
ad[7] = ""; 
ad[8] = "https://www.google.com/search?q=number+8"; 
ad[9] = ""; 
ad[10] = "https://www.google.com/search?q=number+10"; 
ad[11] = ""; 
ad[12] = "https://www.google.com/search?q=number+12"; 
ad[13] = ""; 
ad[14] = ""; 
ad[15] = "https://www.google.com/search?q=number+15"; 
ad[16] = ""; 


for(var i = 1; i < ad.length; i++){ 
	U = ad[i];
	B = tl["c" + i];
	B.url = U;
	if(U != "") {
		B.addEventListener("click", clkAct.bind(this));
		
	} else {
		B.visible = false;
	}	
}

function clkAct(evt) {
    window.open(evt.target.parent.url, "_blank");
}

 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines