Home/ Questions/Q 9169197
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T15:48:57+00:00

I made JS script: var zzz; zzz = { fff: function (Id) { alert(You

  • 0

I made JS script:

var zzz;
zzz = {
    fff: function (Id) {
        alert("You did it! Id="+Id);
    },
    main: function (Id) {
        var button, elements;
        button = document.createElement("input");
        button.type = "submit";
        button.onclick = function () {
            zzz.fff(Id);
        };
        elements = document.getElementById(Id);
        elements.appendChild(button);
    }
};

and HTML, where I tested it:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
        <title>My Web Page!</title>
        <script type="text/javascript" src="test.js"></script>
    </head>

    <body>
        <div id="div001"></div>
        <div id="div002"></div>
        <script type="text/javascript">
            object1 = zzz;
            object1.main("div001");
            object2 = zzz;
            object2.main("div002");
        </script>
    </body>

</html>

Why it works only if I write button.onclick = function () { zzz.fff(Id); }; and with this.fff(Id) it doesn’t work?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you bind an event handler (such as onclick), inside the handler this becomes the element that triggered the event (except if you used an inline onclick="" attribute, which should be avoided).

    Instead of using zzz, you could also copy this to another variable that would be available inside the handler via closure:

    var that = this;
button.onclick = function () {
    that.fff(Id);
};

    Or you could use Function.prototype.bind:

    var clickHandler = button.onclick = function () {
    this.fff(Id);
};
button.onclick = clickHandler.bind(this);
    • 0