Controlling the property of an element inside a symbol from top level

Symbols
1

I am trying to write a function to make an element inside a symbol invisible from the top level.
Searched and tried all related posts to no avail, sorry.
Yes, I could use a custom behavior and/or timelines but I'm trying to slim down my project and just add this to a larger script already in place.

Here are the options I tried:

//This top level function works fine:
hypeDocument.getElementById('joeBlow2').style.visibility = "hidden";

//This one "reaching into the symbol" does not
//var symbolInstance = hypeDocument.getSymbolInstanceById('circleSymbol');
//symbolInstance.getElementById('joeBlow2').style.visibility = "hidden";

//This zombie works but by breaking...and in the process making the element invisible
//var symbolInstance = hypeDocument.getSymbolInstanceById('circleSymbol');
//joeBlow2.setAttribute("style", "visibility: hidden");

What am I doing wrong?
Thanks!

2 
	//Get the symbol element
 var symbolInstanceElement  = hypeDocument.getSymbolInstanceById("circleSymbol").element()
 //Find the element inside the symbol element
 var joeBlow2InsideSym = symbolInstanceElement.querySelector("#joeBlow2")
 
 
 joeBlow2InsideSym.setAttribute("style", "visibility: hidden")

symbolInstance…element()

3 Likes
3

You’re a genius, @MarkHunte. Thank you so much!

4

Just a little hint on naming conventions. I’d suggest using symbolInstance only on instances of symbol. The moment you add .element() it is the actual element and has no access to the instance API found in the Hype help. A solution would be one additional step…

//Get the symbol instance and element
var symbolInstance = hypeDocument.getSymbolInstanceById("circleSymbol");
var symbolElm = symbolInstance.element();
...

From there you would use symbolElm For the query selection etc. this has the advantage that you still got access to the instance (playing timelines etc. and it’s not confusing when you try to use Hype help and examples).

2 Likes
5

Correct, meant to changed that :roll_eyes:

Also while we are at it try not to name vars the exact name of any element Ids

This can lead to you calling on the element directly which may not be the element you are after and also can cause you issues when you change code and thing suddenly stop working.

1 Like