how to assign a target in this case? (html5 canvas)

[flashpeppe]

Hello everyone!

i'm working in html5 canvas projectvand i'd like to add some feature at this code that for now work fine.

In short, i have 7 movieclips with instance name button1, button2, button3, ...etc and these lines of code highlight the button that is pressed.

Now I need to add, according to the button pressed, a specific action, in my case a goToandStop() in the main timeline.

here the code:

1. this.stop(); 
2. // required only if no actual buttons are used 
3. stage.enableMouseOver(20); 
4. // variables 
5. var numButtons = 7; 
6. var i, b, curButton; 
7. // initialize 
8. for (i = 1; i <= numButtons; i++) { 
9.     b = this["button" + i]; 
10.     b.cursor = "pointer"; 
11.     b.mouseChildren = false; 
12.     b.addEventListener("click", buttonClickHandler.bind(b)); 
13.     b.addEventListener("mouseover", buttonRollOverHandler.bind(b)); 
14.     b.addEventListener("mouseout", buttonRollOutHandler.bind(b)); 
15. }
16. // event handlers 
17. function buttonClickHandler() { 
18. if (curButton) { 
19.         curButton.gotoAndStop(0); 
20.     }
21. this.gotoAndStop(2); 
22.     curButton = this; 
23. }
24. function buttonRollOverHandler() { 
25. if (this != curButton) { 
26. this.gotoAndStop(1); 
27.     }
28. }
29. function buttonRollOutHandler() { 
30. if (this != curButton) { 
31. this.gotoAndStop(0); 
32.     }

tnx a lot

[kglad]

with a switch-case (or a sequence of if-else) statments in your click handler.

[flashpeppe]

Tnx for reply Kgald! but my problem is that i can't access at pressed button. how don't know how to do... i've tried a lot and lot!!!

[kglad]

use:

1. function buttonClickHandler() { 
2. if (curButton) { 
3.         curButton.gotoAndStop(0); 
4.     }
5. this.gotoAndStop(2); 
6.     curButton = this; 
7. switch(this.name){

case "button1":

//do whatever

break;

case "button2":

//do whatever

break;

etc

}

1. }

[flashpeppe]

mmmhh no doesn't work! 😞

i'have also created a function but nothing... no alerts displayed

stage.enableMouseOver(20);   

// variables 

var numButtons = 7; 

var i, b, curButton; 

var tgt = this["button" + i];

// initialize 

for (i = 1; i <= numButtons; i++) {   

    b = this["button" + i];

    var tgt =b

    b.cursor = "pointer"; 

    b.mouseChildren = false; 

    b.addEventListener("click", buttonClickHandler.bind(b));

    b.addEventListener("mouseover", buttonRollOverHandler.bind(b)); 

    b.addEventListener("mouseout", buttonRollOutHandler.bind(b));   

}  

// event handlers

function buttonPressed() {  

    switch(this.name){

        case "button1":

            alert("btn1");      

            //do whatever

            break;

        case "button2":

            alert("btn2");        

            //do whatever

            break;

        }

    }

function buttonClickHandler() {

    if (curButton) {

        curButton.gotoAndStop(0); 

    }

    this.gotoAndStop(2); 

    curButton = this;

        buttonPressed();

    //alert(i+71);

} 

function buttonRollOverHandler() { 

    if (this != curButton) { 

        this.gotoAndStop(1); 

    } 

} 

function buttonRollOutHandler() { 

    if (this != curButton) { 

        this.gotoAndStop(0); 

    } 

}

[kglad]

that's not the code i suggested.

stage.enableMouseOver(20);

// variables

var numButtons = 7;

var i, b, curButton;

var tgt = this["button" + i];

// initialize

for (i = 1; i <= numButtons; i++) {

b = this["button" + i];

var tgt =b

b.cursor = "pointer";

b.mouseChildren = false;

b.addEventListener("click", buttonClickHandler.bind(b));

b.addEventListener("mouseover", buttonRollOverHandler.bind(b));

b.addEventListener("mouseout", buttonRollOutHandler.bind(b));

}

// event handlers

function buttonPressed(btn) {

switch(btn.name){

case "button1":

alert("btn1");

//do whatever

break;

case "button2":

alert("btn2");

//do whatever

break;

}

}

function buttonClickHandler() {

if (curButton) {

curButton.gotoAndStop(0);

}

this.gotoAndStop(2);

curButton = this;

buttonPressed(this);

//alert(i+71);

}

function buttonRollOverHandler() {

if (this != curButton) {

this.gotoAndStop(1);

}

}

function buttonRollOutHandler() {

if (this != curButton) {

this.gotoAndStop(0);

}

}

[flashpeppe]

no no doesn't work:-(

if i put alerts in switch cases they are not displayed

if i put an alert here

function buttonPressed(btn) {

               alert(btn.name);

          switch(btn.name){

     case "button1":

          //do whatever

     break;

it return null

i'can't display button's name in alert.

[kglad · Accepted solution]

assign their names:

for (i = 1; i <= numButtons; i++) {

b = this["button" + i];

b.name="button"+i

[flashpeppe]

Oh my god!!! tnx a lot!

[kglad]

you're welcome.