How to pass value to javascript close from input field

Question

I am new to javascript prototype and close, following is my code,

function setFontSize(size) {        
    return function() {
        console.log("font size: "+size+ " setFontSize()");      
        document.body.style.fontSize = size + 'px';
    };
}
function setFontSizeInput(ipval) {
    console.log("font size ipval : "+ipval);
    var fontsizeIP= setFontSize(ipval);
}
window.onload = function() {
    var fontsize18 = setFontSize(18);
var fontsize14 = setFontSize(14);
var fontsize16 = setFontSize(16);
document.getElementById('size-18').onclick = fontsize18;
document.getElementById('size-14').onclick = fontsize14;
document.getElementById('size-16').onclick = fontsize16;
}

on onkeyup I call setFontSizeInput, as the user enters a value in the input field. I want to change fontsize, so I created a new setFontSize (ipval) object and passed in the value of the input field. but this does not reflect. any idea what is wrong in my code. For JSFiddle Click

Answer 1

JavaScript - http://jsfiddle.net/, "fontsizeIP (ipval);", HTML JavaScript:

   <script>
      function setFontSize(size) {      
          return function() {
              console.log("font size: "+size+ " setFontSize()");        
              document.body.style.fontSize = size + 'px';
          };
      }
      function setFontSizeInput(ipval) {
         console.log("font size ipval : "+ipval);
         var fontsizeIP= setFontSize(ipval);
         fontsizeIP(ipval);
      }

      var fontsize18 = setFontSize(18);
      var fontsize14 = setFontSize(14);
      var fontsize16 = setFontSize(16);
      document.getElementById('size-18').onclick = fontsize18;
      document.getElementById('size-14').onclick = fontsize14;
      document.getElementById('size-16').onclick = fontsize16;

   </script>
   Closures Demo
   <br>
   Practival Closures
   <a href="#" id="size-18">18</a>
   <a href="#" id="size-16">16</a>
   <a href="#" id="size-14">14</a>
   <input type="text" id="inputFontSize" placeholder="Enter Font Size" onKeyUp="setFontSizeInput(this.value);">

Answer 2

:

function setFontSizeInput(ipval) {
    console.log("font size ipval : " + ipval);
    setFontSize(ipval)();
}

() setFontSize(ipval). , setFontSize .

: http://jsfiddle.net/WxKJs/2/

, , , , 1 12 12:

function setFontSizeInput(ipval) {
    delay(setFontSize(ipval));
}

var delay = (function() {
    var delay = 100, timer;
    return function(callback) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(callback, delay);
    };
})();

: http://jsfiddle.net/WxKJs/3/

Answer 3

, . jsfiddle: http://jsfiddle.net/WxKJs/7/

I made a FontSize class that stores the local font size value sent to the constructor. I gave him a method setthat will allow you to override and set a new font size if the value is passed as a parameter. As a security check, you probably want to check that your font size is int before you try to save and set it.

function FontSize(size) {
    var self = this;
    function isInteger(value) {
        return (Object.prototype.toString.call(value) === '[object Integer]');
    }
    function isNumber(value) {
        return (Object.prototype.toString.call(value) === '[object Number]');
    }
    function isMouseEvent(value) {
        return (Object.prototype.toString.call(value) === '[object MouseEvent]');
    }
    function getInt(value) {
        var val = parseInt(value, 10);
        if (isNaN(val)) return 12;  // return a default number
        if (isInteger(val)) return val;  // return int
        if (isNumber(val)) return Math.round(val);  // convert to int
        return null;
    }
    self.fontSize = getInt(size);  // our default font size, defined at construction
    self.set = function (override) {
        var fontSize = self.fontSize;
        if (override && !isMouseEvent(override)) {
            fontSize = getInt(override);  // if it not a mouse event get override
        }
        console.log("font size:", self.fontSize, ", override font size:", fontSize);    
      document.body.style.fontSize = fontSize + 'px';
    };
}
function setFontSizeInput(ipval) {
  console.log("font size ipval : "+ipval);
    var inputFontSize = new FontSize(ipval);
    inputFontSize.set();
}

var fontsize18 = new FontSize(18);
var fontsize14 = new FontSize(14);
var fontsize16 = new FontSize(16);
document.getElementById('size-18').onclick = fontsize18.set;
document.getElementById('size-14').onclick = fontsize14.set;
document.getElementById('size-16').onclick = fontsize16.set;