Selecting children for genetic manipulation

Er, I meant JS manipulation. Oops!

Following a solution provided by @jonathan in 2016…

…I made some buttons to increment/decrement a textfield using his js trick (thank you sir!):

textfields

clicker.hype.zip (19.1 KB)

The code is looking for a specific ID, “TextfieldCounter”:

	window.clickCount += 1;
	hypeDocument.getElementById("TextfieldCounter").innerHTML = "" + window.clickCount;                 

The problem, as you might guess from the snapshot, is what happens if you have 2 textfields? Is there a way to say “within this group, go find Whatever and increment it’s innerHTML, and ignore all the other textfields”?

Thank you!

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

Hi Max,

Thank you for your prompt reply, much appreciated. I’m going to parse through your suggestions. Meanwhile, more info:

The original problem had multiple clickers modifying a single textfield.

Your solution has one clicker modifying all textfields with that class.

So I’m hoping when I press Incrementer or Decrements within the group, it only modifies Counter (which, following your suggestion, has a class name) within that group, i.e., pressing Incrementer in Textfield1 only increments Counter inside of it, and not inside Textfield2:

hierarchy

Look at the following code (hope this helps to understand):

clicker_max.hype.zip (37,8 KB)

1 Like

Oh hell yes. I feel good when my socks match, so this is fabulous. Indeed, this is incredibly instructive. Thank you immensely!

1 Like