Change text of button inside symbol

I’m trying to change the button label text using the following javascript

hypeDocument.getElementById('HS.1.1').Button.innerHTML = 'test';

HS.1.1 is the id of the symbol. Inside of this symbol is a button with no id called ‘Button’.

Give the Button an "id" and change your script to this...

hypeDocument.getElementById('the_Button_ID').innerHTML = 'test';

I can’t give the button an id as it is inside a symbol. Any id I give to the button is duplicated to all other copies of the symbol causing a conflict (duplicate ids). But thx for responding.

Give each symbol instance an id. At least with a text element, it will work to replace the text content of text element within a specific symbol instance. (If I remember correctly.)

var something = document.getElementsByClassName(‘uniqueCLassNameForElementInASymbolInstance’);
something[i].innerHTML = ‘

’ + studentData.data[i].firstname + ’ ’ + studentData.data[i].lastname + ‘
’;

Here’s what I ended up doing (credit to Mr Addy) - using JQuery

$.each($('.HS10'), function(key, item) {

	switch (item.id) {		
		case "HS.1.1":
			// Find and rename
			$(item).find('.HSButton').text('text1');
		break;
		
		case "HS.2.2":
			// Find and rename
			$(item).find('.HSButton').text('text2');
		break;
		
		case "HS.2.3":
			// Find and rename
			$(item).find('.HSButton').text('text3');
		break;

	}

});

You can do this without jQuery. I gave the buttons in the demo a class name of “btn” then added another button to run the script via “on click”

var changer = document.getElementsByClassName('btn');

for (var i=0; i<changer.length; i++)

changer[i].innerHTML = "test";	

button_name_changer.hype.zip (13 KB)

Hi @gasspence,
This is a great bit of code… I’m trying to make a button that is a play and pause button for my video also change name at the same time, but I can’t seem to get it to work. The movie plays and stops, but the name of the button changes to “0”, any thoughts on how to go about this?

The var “storyline” is a movie

	var storyline = document.getElementById('storyline')
	var changer = document.getElementsByClassName('storylinebutton');

    if (storyline.paused == false) {
        for (var i = 0; i<changer.length; i++)

changer[i].innerHTML = "Play" & storyline.pause(); 

        } 
        
  else {
        for (var i = 0; i<changer.length; i++)

changer[i].innerHTML = "Pause" & storyline.play();
        }

Hi Bas,

You shouldn’t put the

& storyline.pause();

in with the innerHTML. Basically you’re telling the element to populate it’s inner HTML with Play plus storyline.pause(); which equates to 0 or undefined.

try

changer[i].innerHTML = "Play";
storyline.pause();

Also, you’ve forgotten a curly brace inside your for loop. So, your code should look like this

var storyline = document.getElementById('storyline')
var changer = document.getElementsByClassName('storylinebutton');

if (storyline.paused == false) {
  for (var i = 0; i<changer.length; i++) {
    changer[i].innerHTML = "Play";
    storyline.pause(); 
  }
} 

else {

  for (var i = 0; i<changer.length; i++) {
    changer[i].innerHTML = "Pause";
    storyline.play();
  }
}
1 Like

@DBear, Awesome!!!
Thank you so much for correcting my ignorance, it works like a charm!

no problem

just in case here is a template for simple video manipulation

simpleVideoPlayer.hypetemplate.zip (17.8 KB)

to help with any future projects and reference for the javascript

D

1 Like