Text variable in textbox

(stephane) #1


I am a beginner with javascript and especially the inclusion in hype.

I would like to create a variable in hype with a sentence. In all of my animation, I wish my text boxes using these variables.

If I have a text change to make, I have just one place to edit it.

Is it possible? If so, I need your help.

Thank’s in advance,

(stephane) #2

I found this:

var my_variable = “My text here”;
hypeDocument.getElementById(‘id_my_text_box’).innerHTML = my_variable;


(stephane) #3


It does not work because when I create another dimension (iphone, ipad, etc.), I can not use the same ID …

For this to work, I need a function like: hypeDocument.getElementByClass

I need help … Thanks in advance.


Hi stephane!

I am assuming You want the text change to happen when the scene loads… so the following would be called by the “On Scene Load” handler:

function textChange(hypeDocument, element, event) {
	var my_variable = "My text here";
	var x = hypeDocument.getElementsByClassName("textBox");
	var i;
	for (i = 0; i < x.length; i++) {
    	x[i].innerHTML = my_variable;

textChange.hype.zip (14.8 KB)


BTW, You can use an ID if you use a built in Symbol. You can duplicate the Symbol and put in anywhere in your document or on different layouts. Any changes you make to the Symbol will be reflected in all of the Symbol Instances.

You don’t even need to use Javascript if you so wish. Of course if you want to update the contents programatically then Javascript would be your option. :wink:


(stephane) #6


Weird… If I open your document, all it’s ok…

But I reproduce all in new document and nothing works…

Create fonction - And copy your code (I changed a variable name)

var variable_1 = “Mon texte à mettre dans la boîte”;
hypeDocument.getElementsByClassName(“class_variable_1”) = variable_1;
var i;
for (i = 0; i < x.length; i++) {
x[i].innerHTML = variable_1;

I changed a class name of my textbox, but nothing works… Why ??? :frowning:

I put my file attachment…

Thank’s for your help…

test.hype.zip (11.0 KB)

(stephane) #7


I do not believe that the symbols could work, because I would have a different size fonts for each device resolution (ipad, iphone, etc.).

I tried with the symbols, but the problem is that if I change the dimensions of a text block, every symbol changes size …

Is it possible to change the size of individual way fonts with symbols?

Thank’s for your help,

(strmiska) #8

this only happens, if you try to change the textsize inside a symbol.
but why don´t you change the size of the symbol itself? (fonts also are zooming)
then you can set the size you want for every screen and get same text on every screen.
on changing the text in the symbol, all other will follow.


Hi stephane!

If You are still going the “code” route… Changes to your code below (in bold):

• hypeDocument.getElementsByClassName(“class_variable_1”) = variable_1;
var x = document.getElementsByClassName(“class_variable_1”);

• hypeDocument.getElementsByClassName(“class_variable_1”)

I know I wrote “hypeDocument” in my first post’s code to You but it does not work, just use “document”. (The actual Hype file in my first post above was correct though.)

• Extra curly brace " } " removed.

New code:
function textChange(hypeDocument, element, event) {
	var variable_1 = "Mon texte à mettre dans la boîte";
	var x = document.getElementsByClassName("class_variable_1");
	var i;
	for (i = 0; i < x.length; i++) {
    	x[i].innerHTML = variable_1;

test_v2.hype.zip (14.1 KB)


Just a little more clarification as to why :slight_smile: (warning: nerd speak to follow)

Just like document in the DOM is the owner of all nodes (when a HTML document is loaded in a browser it becomes the document object) in Hype, hypeDocument is a node that owns all other nodes within the Hype Document and has it’s own properties and methods to access different elements (nodes) within Hype using Javascript. It can be used interchangeably with document as it is essentially the same thing. However, there are only so many properties / methods that hypeDocument has and getElementsByClassName isn’t one of them so this is why you would have to use document

Note: if you can use a property / method that hypeDocument has then it would be advisable to use it for future proofing your Hype project.

Also, as Jim said, if you are still going the code route you could, if you so wished, use the following technique to make it easier to change text anywhere in your document.

// put this - \'On Scene Load \' in first scene
changeText = function (text, name) {
    var elements = document.getElementsByClassName(name);
    for (var i=0; i < elements.length; i++) {
        elements[i].innerHTML = text;

Now, whenever you want to change an element’s text, with a specific class, you can use the function like so:

changeText("Mon texte a mettre dans la boîte", "class_variable_1");
changeText("Some more text", "class_variable_2");