web - button.onclick = func(); vs <button onclick = "func()"?

Question

I'm new to javascript and I'm not using jQuery.

I'm trying to make my function btnHandle() run when I click the button.

However, I found that

btn.onclick = btnHandle();

is different from

<button id="sort-btn" onclick="btnHandle()">submit</button>

When I use btn.onclick = btnHandle();, the btnHandle() function is executed when I refresh the code without clicking the button.

I want the function be executed only when the button clicked.

<button id="sort-btn" onclick="btnHandle()">submit</button> works as I want.

Why the previous one not working well? Why the onclick event is fired the the page is loaded?

    <button id="sort-btn" onclick="btnHandle()">submit</button>

    <script type="text/javascript">

    function btnHandle() {
        var aqiData = getData();
        aqiData = sortAqiData(aqiData);
        render(aqiData);
    }


    function init() {
        var btn = document.getElementById("sort-btn");
    //        btn.onclick = btnHandle();
    }

    init();
  </script>

JLRishe · Accepted Answer · 2016-07-21 10:35:34Z

1

As Kevin points out, the function is executing immediately because you have parentheses after it.

However, both of these approaches are outdated now. You should use addEventListener:

btn.addEventListener('click', btnHandle);

answered Jul 21, 2016 at 10:35

JLRishe

102k19 gold badges138 silver badges171 bronze badges

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

Comments

keneco · Accepted Answer · 2016-07-21 10:32:05Z

0

btn.onclick = btnHandle;

without parenthesis

btnHandle references the function while btnHandle() executes the function

answered Jul 21, 2016 at 10:32

keneco

816 bronze badges

Collectives™ on Stack Overflow

web - button.onclick = func(); vs <button onclick = "func()"?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related