0

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();
2
  • 1
    Your markup only shows one input, so I'm not clear on what you're trying to do. The markup with your code looks fine as is.
    – kinakuta
    Commented Aug 3, 2013 at 22:09
  • you can probably only get one input to work, because in your setupUpdater method you are assigning input the value of the very first input element (`document.getElementsByTagName('input')[0]) found in the DOM.
    – fletch
    Commented Aug 3, 2013 at 22:12

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.