It won't work because what is actually changing is the <span> tag, not the <p> one. Move the onchange event caller to the span tag.

<p><span id="output" style="font-weight: bold;" onchange="changed(this.value);"></span></p> 

It won't work because what is actually changing is the <span> tag, not the <p> one. Move the onchange event caller to the span tag.

EDIT You led me to believe in your question that your "innerHTML" statement was actually working, that's why the mistaken answer. You also never mentioned when this event is supposed to happen, so I'm assuming it's expected to happen as soon as the page finishes loading, otherwise, write your event caller later.

Also, drop the onchange event caller entirely and just put the console.log logic inside your event function, so both will happen in sequence.

document.addEventListener("DOMContentLoaded", function(){ var valueText = "You are the first user, waiting for User 2...."; document.getElementById("output").innerHTML=valueText; console.log("Inside changed!! " + valueText); });

<p><span id="output" style="font-weight: bold;"></span></p>