Ability to push text into a screen text element with JS?


(Maurice) #1

Hiโ€ฆ I am taking on the task of learning javascript to create an interactive demo. I am very early on and nothing is working. I figure the best way to see what is working is to monitor the status of some variables.

To do this, I would assume I would take a text element on the screen, name it, then in my JS function, tell that text element its new value which it would display to the screen. I went through all of the JS functions and cannot see any that will write back to a text Hype element. Does anyone have any examples that might help me here?

Thanks!


(๐•„๐•š๐•”๐•™๐•’๐•–๐• ๐”พ๐•’๐•ฃ๐• ๐•—๐•’๐•๐• ) #2

Iโ€™m not quite sure what you mean. Do you mean like the ticker at the bottom of the โ€œCablingโ€ game?


(Maurice) #3

I am new to JSโ€ฆ I am running a script I am writing. Nothing is working. I cannot tell if my variables are changing, so I want to tell the script to display the value of the variable to the screen. I figured I could set the value of a text element so I could see it when the script runs. Does that make sense? I want to monitor variables while I am learning.


#4

Hi @Maurice

In Every browser you will have what is called a โ€œConsoleโ€ which is accessed by the combination of CMD-ALT-I or CMD-ALT-J depending on the browser used. This makes it possible to place code side by side with your code that will only be visible in this console so that you can see what is going on at a specific time.

var x = "something";
console.log(x);
var y = x + "else";
console.log(y);

If you want to visually see it in an element then you would have to give your element an ID and then assign it to a variable itself and then populate the innerHTML of that element with whatever you want.

myElement = hypeDocument.getElementById("theID");
var x = "something";

myElement.innerHTML = x;

displayVariables.zip (18.1 KB)


(Mark Hunte) #5

To Add to @DBearโ€™s answer which looks like what you are trying to do.

The Hype API ( Javascript functions) are convenience commands to help work with Hype Objects.
But the wider native Javascript can be used alongside it. hence Dbearโ€™s .innerHTML


(Maurice) #6

DBear - the console trick was most helpful!

I will try the variable display tomorrow too. Thank you!