Forum Discussion

ThilagamSakkara's avatar
ThilagamSakkara
Community Member
2 years ago

Change state of the shape based on the value of the variable using Javascript

I do have a shape(Rectangle 1) in my timeline and added multiple states(10, 20, 30). I have also created few variables which changes based on check box status. Now I want to edit the state of the rectangle based on these variable values using javascript.

var getprogressrectangle = document.querySelectorAll("[data-acc-text='Rectangle 1']");
if (userval1 == 1 && userval2 == 0){
getprogressrectangle.setState({state: "30"});

}else{getprogressrectangle.setState({state: "10"});}

But I'm getting "getprogressrectangle.setState is not a function" error.

 

Any help would be much appreciated!!

  • Why you think 'setState' should work ?

    If you check your console you will notice a state change will change quite a lot in the HTML...

  • If you make a simple sample with a few states and run this in your console....
    DS.shadowDOM.state.children
    you will get a list of ( i presume ) all elements in view with their states and a lot more info.
    Selecting one of them...
    DS.shadowDOM.state.children[0]
    will simplify the info and you can see quite a lot of info on your element.
    including a property called hideShowState: "show"
    That one might be the one needed.
    But as is the code inthere is way to complicated to decipher. For me at least.

  • Hi Math,

    Thank you for your response. Yes, this seems complicated. I may go ahead with multiple triggers and variables.