Selecting children for genetic manipulation


#1

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!


#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.


#3

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


#4

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

clicker_max.hype.zip (37,8 KB)


#5

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