CODEWITHSUNDEEP
javascript
Sakthivel
Sakthivel

Reputation: 666

Closure in javascript seems not working properly

I've the following code and it is not working properly. My aim is whenever i click the 'font size' such as 12, 14 and 16, then, the font size and its color need to change accordingly and simultaneously. But, it is not working as expected, Any help?

<body>
    <p>Some paragraph text</p>
    <h1>some heading 1 text</h1>
    <h2>some heading 2 text</h2>

    <a href="#" id="size-12">12</a>
    <a href="#" id="size-14">14</a>
    <a href="#" id="size-16">16</a>

    <script type="text/javascript">
function makeSizer(size) {
  return function(oclor) {

    document.body.style.fontSize = size + 'px';
    document.body.style.color = oclor;
  };
}
var a= "green", b= "blue", c="red";

var size12 = makeSizer(12)(a);
var size14 = makeSizer(14)(b);
var size16 = makeSizer(16)(c);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

</script>
    </body>

Upvotes: 0

Views: 56

Answers (2)

Alex
Alex

Reputation: 7374

Is there a reason why you can't do the following?

Edit: Sorry, missed the return function. Thanks for pointing that out @DanielKnippers

function makeSizer(size,oclor) {
    return function () {
        document.body.style.fontSize = size + 'px';
        document.body.style.color = oclor;
    };
}

var size12 = makeSizer(12,'green');
var size14 = makeSizer(14,'blue');
var size16 = makeSizer(16,'red');

Upvotes: 0

Smeegs
Smeegs

Reputation: 9224

This is where your problem is.

You're setting the variables to the result of the anonymous function. Which is undefined. Then you're setting the onclick events to the results.

var size12 = makeSizer(12)(a);
var size14 = makeSizer(14)(b);
var size16 = makeSizer(16)(c);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

What you want is to set the variables to functions as well. Such as:

var size12 = function(){makeSizer(12)(a)};

Upvotes: 3

Related Questions