Need help toggling button states with javascript

Using JavaScript with Hype
1

I’m trying to control a menu in a symbol. I want to set a variable to track which of 3 options has been selected so that when a new option is selected it plays the new option timeline forward and plays the old option timeline in reverse.

I thought it would be simple if/then but I can’t seem to control the timelines at all. The code below is the function I call when you push option #1, there’s the same function for 2 and 3.

cSymbol=hypeDocument.getSymbolInstancesByName("thumb_menu");
    if(thumb_option2 = 'selected'){
cSymbol.startTimelineNamed("option2", kDirectionReverse);
};
if(thumb_option3 = 'selected'){
	cSymbol.startTimelineNamed("option3", kDirectionReverse);
};

cSymbol.startTimelineNamed("option2", kDirectionForward);
// set selection and highlight	

var thumb_option1 = "selected";
var thumb_option2 = "not";
var thumb_option3 = "not";
}
2

There’s a lot that is wrong in the code - my first recommendation would be to dive a bit deeper into learning JavaScript :slight_smile:.

cSymbol=hypeDocument.getSymbolInstancesByName("thumb_menu");

getSymbolInstancesByName returns an array (the “instances” is plural), but you are trying to address this array as an individual symbol. It is likely instead you want to assign an ID to your symbol instance and use the getSymbolInstanceById instead.

Also you are making cSymbol a global variable by not using a var; this may or may not be what you want.

if(thumb_option2 = 'selected'){

if(thumb_option3 = 'selected'){

Here you are doing an assignment with a single equals sign. Instead you will want to use a == (double equals) to check for equality.

var thumb_option1 = "selected";
var thumb_option2 = "not";
var thumb_option3 = "not";

By including the var at the beginning, you are doing a declaration that is in the function scope. It seems you probably want these to be global variables instead. You can take off the var part or be more explicit by using the window.thumb_optionX form. You may need to also deal with initial state cases depending on your check.

1 Like
3

Thanks for the response. I’m a designer and a code editor. I really should try to learn the fundamentals.

I had it working and then moved to the larger project file and it stopped. I removed the conditional logic just to see if I can control the timelines inside the symbol and nothing works!

	thumb=hypeDocument.getSymbolInstanceByID('uc_menu');
	thumb.startTimelineNamed('uc3', hypeDocument.kDirectionForward);
	thumb.continueTimelineNamed('uc1', hypeDocument.kDirectionReverse, canRestartTimeline);
	thumb.continueTimelineNamed('uc2', hypeDocument.kDirectionReverse, canRestartTimeline);
4

Without seeing the document, I can only guess that the issue might be this line:

thumb=hypeDocument.getSymbolInstanceByID('uc_menu');

The proper function name is getSymbolInstanceById and not getSymbolInstanceByID (no capital D). Further, canRestartTimeline is likely not what you want (I’m assuming this is not a declared variable); you’ll want either true or false in that argument.

In cases like this, it is best to check the developer console and see if there are any specific errors.

Also, I can only assume that you have an element with the ID of uc_menu and the timeline names are correct. Otherwise it wouldn’t work still.