I would like to have more than one input which can output what the user has put inside the input box on one page and for it to update live. I can currently only get one input to work live.
HTML Code
<input type=text></input><!-- inputs live text -->
<p id="headingone"></p><!-- outputs live text -->
Javascript Code
function reverse(s) {
return s.split('').reverse().join('')
}
function set(el, text) {
while (el.firstChild) el.removeChild(el.firstChild);
el.appendChild(document.createTextNode(text))
}
function setupUpdater() {
var input = document.getElementsByTagName('input')[0]
, orig = document.getElementById('headingone')
, oldText = input.value
, timeout = null;
function handleChange() {
var newText = input.value;
if (newText == oldText) return;
else oldText = newText;
set(orig, newText);
}
function eventHandler() {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(handleChange, 50);
}
input.onkeydown = input.onkeyup = input.onclick = eventHandler;
}
setupUpdater();
document.getElementsByTagName('input')[0].focus();
setupUpdater
method you are assigninginput
the value of the very first input element (`document.getElementsByTagName('input')[0]) found in the DOM.