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;
}
}
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.
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 ???
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.
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;
}
}
Just a little more clarification as to why (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");