Question

I have a message display field on my website that I’d like to change the value of via JS.

I’ve been using just a textfield, disabling it, and modifying the value via a JS function (after using a little CSS to make it not look like a text field):

<input type="text" id="message" style="background: white; color: black" size="50" disabled>

There has to be a better way (for instance, formatting is tricky whenever the message runs over the specified size), but I can’t think of it off the top of my head. Can anyone point me in a better direction? Thanks!

FYI: I am doing a timer function which I’d like to look something like “HH:MM:SS | ‘my message here'”

Answer 1

You can set the contents of any element with innerHTML. So instead of messing with a form input, you could just have this:

<div id="message"></div>

And set it via JavaScript like this:

document.getElementById('message').innerHTML = 'This message is awesome.';

And you would get this result:

<div id="message">This message is awesome.</div>