I have several (20 symbols) in a scene, only one will be visible at a time, so I have created a function, I have checked the name of the symbol in the inspector, how can I set the visibility, I have tried:
That’s great, could I ask how we can pass a variable into a function, i.e. if I have 20 symbols that I use in the function to initially hide it will be more efficient for me to also send as a variable the one symbol to make visible, this way I can use one function to do everything:
function(hypeDocument, element, event, myelement) {
//loop all symbols to hide
hypeDocument.getElementById(myelement).style.visibility = “visible”;
}
Apologies for not being clear, I am checking to see if it is possible to add a parameter to a function as I have tried and the programme prevent me from doing so.
This may be a bit of a hack but this can help you out I think. Your request is pretty specific and I don't know about the full details but I made this script for you.
Label all your hotspots with a class hotspots
add this function in, make them all trigger it OnOffButtons.zip (10.8 KB)
I used Document.elementFromPoint() - Les API Web | MDN as a way to do collision detection.
Right now its set so that if you click on the hotspot the others dissapear. But you can do the reverse if you want or you can link to custom hotspots in the array e.g. label them customly and do
if(allhotspots[i].className==="HYPE_element hotspots"){
if(selectedhotspot.id=="My custom ID here"){
//do the thing
}
}
This should help you narrow it down to 1 single function.
Full function code
var allhotspots = document.getElementsByClassName('hotspots')
var selectedhotspot = document.elementFromPoint(event.pageX,event.pageY);
for(var i=0;i<allhotspots.length;i++){
//run trough all hotspots
if(allhotspots[i].className==="HYPE_element hotspots"){
//check if it's the selected hotspot
if(selectedhotspot.id==allhotspots[i].id){
console.log('you clicked on hotspot '+ i)
}
else{
//for the others
OnOff(allhotspots[i])
console.log("I'm hiding hotspot "+i)
}
}
}
//visibility on off switch
function OnOff(target){
if(target.style.visibility=='hidden'){
target.style.visibility='visible';
}else{
target.style.visibility='hidden';
}
}
console.log("--------------//--------------")
As complicated as Lucky's solution is, it works. But
@Luckyde I don't think he needs collision detection I may be wrong
I think it would be a little easier to give your symbols a class name of "hidden" and this can be CSS in your Head HTML. Then check to see if your symbol has that class name and if it does change it back to it's original class name. (HYPE_element) (when you want it to be visible)
Yeah definitely that works too, but yeah I’m doing it that way since as you said he’s looking for kind of a overall controlling function with a custom parameter. I’m using collision detection to return what is currently selected. But yeah the CSS would work too.
I apologise for following up on this thread, I have been looking at how best to handle this, I understand I can obatin the caller of the function using the ‘element’ name, can I then add a text to this:
i.e. my button ID is hotspot1 using this can I then add ‘a’ to this so that I can perform:
If you have a button with the id of Hotspot1 and another element with the id of a
And you want then to click button Hotspot1 to trigger a function that needs to work on the element with the id a
( I assume the is some conditional logic in the function and you have other elements that may be chosen) Then you can simply append the two strings together using the + string operator.