Need to store input value to variable on change

Question

I am trying to store the value of an input into a variable. For now, I want to just paste the input value into a span element so I can know that it works. However I cannot get it work in my JSFIDDLE. Any suggestions?

HTML:

<label>Advertising Budget:</label>
                <input id="advertising" onchange="updateAdvertising(this.value)">  </input>
<span id="test">xxx</span>

Javascript:

function updateAdvertising(adv){
    document.getElementById('test').innerText = adv;
}

JSFIDDLE: http://jsfiddle.net/6J4MN/

Change the select drop down for execution time to 'no wrap - in <head>' Fiddle — Bic
– Bic, Commented Feb 18, 2014 at 21:15
@Bic what exactly is that doing? It works, but I just want to know what it is doing so I can implement it. — Ryan Salmons
– Ryan Salmons, Commented Feb 18, 2014 at 21:19
You had it set to onLoad, which means your method isn't defined until AFTER the page has loaded and the onclick has been bound. When the page loads, the onclick method doesn't exist, and therefore nothing gets bound. If you have it wrap in the head, the content will get loaded BEFORE the page renders, ensuring the method exists at the time of binding. — Bic
– Bic, Commented Feb 18, 2014 at 21:20

mplungjan · Accepted Answer · 2014-02-19 06:19:52Z

3

innerHTML is more compatible, also change fiddle to head instead of onload

Here is a neater solution

Live Demo

window.onload=function() { 
  document.getElementById("advertising").onchange=function(){
    document.getElementById('test').innerHTML = this.value;
  }
}

Since onchange needs a blur to trigger, use onkeyup for immediate change:

Live Demo

window.onload=function() { 
  document.getElementById("advertising").onkeyup=function(){
    document.getElementById('test').innerHTML = this.value;
  }
}

edited Feb 19, 2014 at 6:19

answered Feb 18, 2014 at 21:19

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Newse · Accepted Answer · 2014-02-18 21:34:24Z

1

Note the "OnChange" event for the text box will fire once you hit enter or leave the text box. If you change the event to, say keyup, it will update the span after every letter you type.

<script type='text/javascript'>//<![CDATA[ 
  window.onload=function(){

    function addEvent(element, evnt, funct){
       if (element.attachEvent)
         return element.attachEvent('on'+evnt, funct);
       else
         return element.addEventListener(evnt, funct, false);
    };

    addEvent(document.getElementById('advertising')
        , 'change'
        , function () { updateAdvertising(this.value); }
    );

   var updateAdvertising = function(adv){
      document.getElementById('test').innerText = adv;
   };
 };
</script>

edited Feb 18, 2014 at 21:34

answered Feb 18, 2014 at 21:28

Newse

2,3381 gold badge14 silver badges7 bronze badges

Collectives™ on Stack Overflow

Need to store input value to variable on change

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related