I created a basic JavaScript closure script, but it refuses to execute. Can anyone point out my mistake?

Question

I created a basic JavaScript closure script, but it refuses to execute. Can anyone point out my mistake?

I recently started learning Javascript and have been practicing closures. I created a simple code where clicking on a link should increase the font size of the document's body. However, I seem to be making a mistake somewhere and can't figure out what it is.

    <!DOCTYPE html>
    <html>
       <head>
          <style>
             body {
             font-family: 'Times New Roman', Times, serif;
             font-size: 10px;
             background-color: bisque;
             color:black;
             }
          </style>
</head>
       <body>
          <p>HELLO!! I AM CHANGING MY SIZES.</p>
          <a href="#" id="size-12" onclick="changeSize(12)">Size 12</a>
          <a href="#" id="size-14" onclick="changeSize(14)">Size 14</a>
          <a href="#" id="size-16" onclick="changeSize(16)">Size 16</a>
          <script>
             function changeSize(size) {
                   return function () {
                       document.body.style.fontSize = size + 'px';
                   }
               };
          </script>
       </body>
<html>

javascript closures

Answer 1

Answer №1

If you're currently returning a function and not calling it, make this simple change to call the function:

onclick="changeSize(12)()"

By doing this, changeSize(12) will return the inner function, and then using the second set of parentheses will call the inner function :)

UPDATE: As others have pointed out, there's no real need to return an inner function. If the content of the function changeSize() were something like:

function changeSize(size) {
    document.body.style.fontSize = size + 'px';
}

it would be much more concise

Answer 2

If you're currently returning a function and not calling it, make this simple change to call the function:

onclick="changeSize(12)()"

By doing this, changeSize(12) will return the inner function, and then using the second set of parentheses will call the inner function :)

UPDATE: As others have pointed out, there's no real need to return an inner function. If the content of the function changeSize() were something like:

function changeSize(size) {
    document.body.style.fontSize = size + 'px';
}

it would be much more concise

Answer 3

Answer №2

One benefit of utilizing a function created from a closure is to develop a function that "locks in" a more general function with specific parameters. Adjusting the handler attributes by adding an extra pair of parentheses at the end may resolve the issue, but it defeats the purpose of using a function-generating function.

Instead, consider creating a series of predefined functions to be used in your HTML:

      <script>
         function changeSize(size) {
               return function () {
                   document.body.style.fontSize = size + 'px';
               }
           };

         var size12 = changeSize(12);
         var size14 = changeSize(14);
         var size16 = changeSize(16);
      </script>

You can now implement these pre-made functions in your HTML code:

      <a href="#" id="size-12" onclick="size12()">Size 12</a>
      <a href="#" id="size-14" onclick="size14()">Size 14</a>
      <a href="#" id="size-16" onclick="size16()">Size 16</a>

Answer 4

One benefit of utilizing a function created from a closure is to develop a function that "locks in" a more general function with specific parameters. Adjusting the handler attributes by adding an extra pair of parentheses at the end may resolve the issue, but it defeats the purpose of using a function-generating function.

Instead, consider creating a series of predefined functions to be used in your HTML:

      <script>
         function changeSize(size) {
               return function () {
                   document.body.style.fontSize = size + 'px';
               }
           };

         var size12 = changeSize(12);
         var size14 = changeSize(14);
         var size16 = changeSize(16);
      </script>

You can now implement these pre-made functions in your HTML code:

      <a href="#" id="size-12" onclick="size12()">Size 12</a>
      <a href="#" id="size-14" onclick="size14()">Size 14</a>
      <a href="#" id="size-16" onclick="size16()">Size 16</a>

I created a basic JavaScript closure script, but it refuses to execute. Can anyone point out my mistake?

Answer №1

Answer №2

Similar questions

LOGIN operation in Mongoose with Node.js fails due to a null value in

Submitting form data as JSON using Axios' POST method

What is the process for finding GitHub users with a specific string in their name by utilizing the GitHub API

This method or property is not supported by the object - How to call an Applet in Internet Explorer 9

"Combining Angular and jQuery for powerful web development

What steps can I take to ensure that WebStorm properly recognizes a package's functions?

Using Vue to dynamically set custom validation messages

Having npm start is causing an error to be displayed

Substitute phrases with hyperlinks using JavaScript (or Ruby)

Is there a method to refresh the image in the template?

Ways to utilize useEffect after a modification in the localStorage value

Implementing dynamic input elements in React components and managing state changes

Error: AJAX response shows as NaN, indicating that the requested resource was not found

Achieving a transparent inner box-shadow effect on hover: a step-by-step guide

Changing the entire content of a webpage from the server using AJAX

.ajax() triggers a page refresh upon pressing the ENTER key

Is it possible to evaluate the complexity of automating the user interface of a web application?

jqGrid is throwing an error: undefined is not recognized as a function

Spin and flip user-submitted images with the power of HTML5 canvas!

A guide to setting up checkbox input in Vue 3 so that it toggles between checked and unchecked states when an