Selecting children for genetic manipulation

2

You can always just use classes instead of unique id’s

Often you can just you use the element passed into the function (onclick etc.)

/* search below element and return first class below it matching*/
var myClicker = element.querySelector('.yourClass');
myClicker.innerHTML = "something";

Then you can also limit to the document if you use it onscene (like init etc.)

/* get root of hype widget to only search below it */
var doc = hypeDocument.getElementById(hypeDocument.documentId());
/* search in hype widget and return first class below it matching*/
var myClicker = doc.querySelector('.yourClass');
myClicker.innerHTML = "something";

I often use something like this on a init function on scene load

/* get root of hype widget to only search below it */
var doc = hypeDocument.getElementById(hypeDocument.documentId());
/* search in hype widget and return all element with class below it matching*/
var clickers = doc.querySelectorAll('.myClickers');
/* loop over them*/
for (var i=0; i<clickers.length; i++){
    var clicker = clickers[i];
    /*do stuff with single clicker */
   clicker.innerHTML = "something";
}

PS: I have not looked at you Hype-File … this ist just general advices. Look at querySelector (single) and querySelectorAll (group).

PPS: You don’t need to call the vars clickers/clicker… I just often use single and plural forms to understand what I am doing.

1 Like