How to pass value to JavaScript closure from input field

Question

I am new to JavaScript prototype and closure, 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 event I am calling setFontSizeInput, as the user enters value in input field I want to change fontsize so I have created new object of setFontSize(ipval) and passed input field value, but it not reflecting. Any idea whats wrong in my code?

For JSFiddle Click

Seems to be working ("Closures Demo Practival Closures" changes in size when I click on the buttons), could you provide more details as to what's meant to happen? — Qantas 94 Heavy
– Qantas 94 Heavy, Commented Jan 21, 2014 at 10:19

dfsq · Accepted Answer · 2014-01-21 10:37:07Z

3

Modify your code as follows:

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

Note () after setFontSize(ipval). They are needed since setFontSize returns function.

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

I would also recommend to use some little delay before you change font size to avoid flickering of the font from, say, 1 to 12 when you type 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);
    };
})();

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

edited Jan 21, 2014 at 10:37

answered Jan 21, 2014 at 10:23

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

f.cipriani Over a year ago

Also note that if using JSFiddle "No wrap - in <body>" need to be specified in the options on the left. Leaving the default "onLoad" will wrap the javascript code inside a window.load() event and it won't be possible to call it from html

dfsq Over a year ago

@f.cipriani Correct, otherwise all defined functions are local scope and not globally available.

Kara · Accepted Answer · 2014-02-08 00:40:47Z

The JavaScript was not loaded into the document because of some bug in http://jsfiddle.net/ codes, also after getting the function you should call it "fontsizeIP(ipval);" , try this way and put it in HTML editor and remove all from JavaScript editor:

   <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);">

psyrendust · Accepted Answer · 2014-01-21 11:10:48Z

I modified your code a bit to make better use of closures. Here is a link to the updated jsfiddle: http://jsfiddle.net/WxKJs/7/

I made FontSize a class which stores a local value of the font size that was sent to the constructor. I gave it a set method that will allow you to override and set a new font size if a value is passed as a parameter. As a safety check you would probably want to check that your font size is an int before you actually try and save/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's 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;

Collectives™ on Stack Overflow

How to pass value to JavaScript closure from input field

3 Answers 3

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

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

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

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

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

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related