Binding onclick in JavaScript without having JS directly in the HTML file

Question

Previously, I had this line in my HTML file:

<input type="button" value="1" name="btn1" id="btn1" onclick="showNum(1)" />

This works fine, but I don't want to include the method name in the HTML file. I would like to have something like this in the HTML:

<input type="button" value="1" name="btn1" id="btn1" />

And then I want to bind this button to the method in the JS file. I tried this code and it doesn't work:

window.onload = function() {
    document.getElementById("btn1").onclick = showNum(1);
};

How can I bind btn1 to run showNum(1) using JavaScript?

Is the argument to showNum always the same as the value of the input? — Barmar
– Barmar, Commented Sep 19, 2019 at 19:07

Moob · Accepted Answer · 2019-09-19 17:53:38Z

2

It is also possible to bind a reference to the function, like so:

var showNum = function(){
    alert(this.value);
}
window.onload = function() {
    document.getElementById("btn1").onclick = showNum;
};

<input type="button" value="1" id="btn1" />

answered Sep 19, 2019 at 17:53

Moob

16.5k1 gold badge40 silver badges54 bronze badges

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

Comments

el toro · Accepted Answer · 2019-09-19 17:37:59Z

1

I can't tell you exactly why it works like this, but if you use an anonymous function with showNum(1); inside of it when assigning to onclick, it works fine.

window.onload = function() {
    document.getElementById("btn1").onclick = function () {
        showNum(1);
    }
};

Also a tip, window.onload can only be used once, so if you have a master page in your site that also needs to run a script when the page starts, it can be overridden. Use a self-starting function like this and then you won't have to worry about that, and you can have as many as you want. Plus it's cleaner and looks nicer (at least to me).

(function () {
    document.getElementById("btn1").onclick = function () {
        showNum(1);
    }
})();

Just make sure it's after the rest of your JS code and HTML, since pages load from the top down.

edited Sep 19, 2019 at 17:37

answered Sep 19, 2019 at 17:32

el toro

5424 silver badges11 bronze badges

4 Comments

Aaron Franke Over a year ago

I tried using the self-starting function and it doesn't work. The first part, = function(){ showNum(1); } works, though.

el toro Over a year ago

Is it at the bottom of your page, after all the HTML? Pages load vertically, and the downside of the self-starting function is that the element has to exist before you can call it. Personally I have no issue with that, in general it's good practice to put all scripts at the bottom of your page.

Aaron Franke Over a year ago

Oh, it has to be below the HTML too? I had it at the bottom of my JS at the top of my HTML. That's kind of a bummer and would require me to move my JS out of <head>.

el toro Over a year ago

Is there a need to keep it in <head>? It's a common convention to put JS code at the bottom of the page (such as in a footer, or just floating after the body), mostly because the user will see a page load faster. If you make the user wait for the DOM to get through all the JS in the header, your page will load slower. Personally I think it works better for organization too, but at the very least, you should try to keep JS after the HTML on a page.

Barmar · Accepted Answer · 2019-09-19 17:32:48Z

1

You need to create a new function that calls showNum() with the argument you want.

window.onload = function() {
    document.getElementById("btn1").onclick = function() {showNum(1);};
};

You can also use the .bind() method to bind the argument.

window.onload = function() {
    document.getElementById("btn1").onclick = showNum.bind(null, 1);
};

answered Sep 19, 2019 at 17:32

Barmar

789k57 gold badges555 silver badges669 bronze badges

2 Comments

Aaron Franke Over a year ago

What does the first argument of bind do? (the null)

Noob Over a year ago

@AaronFranke first argument is this, and because we don't care in this case where this points to we pass null instead

Andrey · Accepted Answer · 2019-09-19 17:34:30Z

0

window.onload = function() {
    document.getElementById("btn1").addEventListener('click', ()=>showNum(1));
};

answered Sep 19, 2019 at 17:34

Andrey

3112 gold badges8 silver badges29 bronze badges

Comments

Alex Vovchuk · Accepted Answer · 2019-09-19 17:36:01Z

0

showNum instead of showNum(1)

showNum - is handler, but showNum(1) - is result of the execution.

if parameter is required: showNum.bind(this, 1);

Or even better - addEventListener can be used: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

edited Sep 19, 2019 at 17:36

answered Sep 19, 2019 at 17:34

Alex Vovchuk

2,9664 gold badges23 silver badges43 bronze badges

2 Comments

Aaron Franke Over a year ago

But the method takes one argument, which I need to pass in.

Alex Vovchuk Over a year ago

@AaronFranke if parameter is required: showNum.bind(this, 1);

Collectives™ on Stack Overflow

Binding onclick in JavaScript without having JS directly in the HTML file

5 Answers 5

Comments

4 Comments

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related