Change innerHTML in multiple classes at once

Using JavaScript with Hype
1

I tried the @MaxZieb and @MarkHunte extension "hypeDocument.setInnerHtmlByClass".
This works great but I'm looking for a way to change more classes at the same time.
What I am trying to do is the following.
I have a lot of elements with a unique class. Using a button, I can show text inside the element. Now I want to change the text. No problem. Example: text is Eb in class 'root' and Bb in class 'fifth'. Change this into resp. D# and A#. No problem. But a little later text is Eb in class 'fifth' and Bb in class 'root'.
Is there a way to collect all these classes and change and reverse the texts in one go?
I have tried a lot possibilities but my (little) knowledge of javascript doesn't help me here.

changeClassTxt.hype.zip (23.9 KB)

:rotating_light: Please note that we can only address JavaScript questions and issues in the context of Tumult Hype, so please attach a Hype document so others can dig into what you have so far.

2

Do you mean this

    var classContents = {'root':'D#','fourth': 'G#','fifth' :'A#' }
    
    
    for (const [key, value] of Object.entries(classContents)) {
  
  
   hypeDocument.setInnerHtmlByClass ( key , value );
}

changeClassTxt.hype 2.zip (51.7 KB)

You could even just have each button's data attributes determine what the changes will be

Screenshot 2021-04-03 at 19.55.02

and then have the buttons linked to single function.

    var classContents = element.dataset
    
    for (const [key, value] of Object.entries(classContents)) {
  
  
   hypeDocument.setInnerHtmlByClass ( key , value );
}

changeClassTxtDataset.hype.zip (51.7 KB)

3 Likes
3

This goes into head


<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeDataDecorator/HypeDataDecorator.min.js">
</script>
<script>
HypeDataDecorator.mapDataAttribute('label');
</script>

Now, add data-label to a group… editing data-label will change all instances of .label below it in one go and is reactive.

3 Likes
4

Thanks both. I'll go for Mark's first solution. This will be the most easy to implement for me.

4 Likes