JavaScript button onclick not working

Question

<button onclick="hello()">Hello</button>

<script>
  function hello() {
    alert('Hello');
  }
</script>

This is my code. But it's not working. When I click on the button nothing happens.

Now the alert comes when I load the page not when I click on the button — Martin W
– Martin W, Commented Mar 1, 2017 at 11:19

Michael · Accepted Answer · 2017-08-07 09:45:04Z

34

Note to other developers coming across this, you can run into this if you use a reserved method names e.g. clear.

<!DOCTYPE html>
<html>
<body>
  <button onclick="clear()">Clear</button>
  <button onclick="clear2()">Clear2</button>
  <script>
  function clear() {
    alert('clear');
  }
  function clear2() {
    alert('clear2');
  }
  </script>
</body>
</html>

edited Aug 7, 2017 at 9:45

answered Aug 7, 2017 at 2:45

Michael

12.1k4 gold badges67 silver badges61 bronze badges

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

1 Comment

Philip Over a year ago

I was wondering why my method named clear wasn't being called...

Kangjun Heo · Accepted Answer · 2017-03-01 11:17:19Z

21

How about this?

<button id="hellobutton">Hello</button>
<script>
function hello() {
alert('Hello');
}
document.getElementById("hellobutton").addEventListener("click", hello);
</script>

P.S. You should place hello() above of the button.

answered Mar 1, 2017 at 11:17

Kangjun Heo

1,0811 gold badge9 silver badges19 bronze badges

Comments

Edward · Accepted Answer · 2019-08-20 19:55:15Z

12

Ran into this problem myself so I can confirm something's not right. The difference is that I am generating the DOm Element at runtime. Replacing onclick with onmousedown seemed to do the trick if you can't find a place to addEventListener in your code.

answered Aug 20, 2019 at 19:55

Edward

5571 gold badge7 silver badges25 bronze badges

4 Comments

Jaskaran Singh Over a year ago

this saved my day

Dennis Hackethal Over a year ago

makes no difference for me...

Tom Pietrosanti Over a year ago

onclick also fires for keyboard interaction, whereas onmousedown does not. (not sure if onmousedown also fires for touch, but that could be another difference)

Sergey A Kryukov Feb 12 at 23:43

What you say is not true. There is no difference. Of course, assignment to .onclick removes other handlers, that's all.

Nick Vu · Accepted Answer · 2022-10-08 05:26:52Z

4

I had the same problem and that's because of reserved method names. We just change the function name.

function click() {
    alert('hi')
    
}

function click1234() {
    alert('hi')
    
}

<body>
<button onclick="click()">login</button>

<button onclick="click1234()">login1234</button>
</body>

edited Oct 8, 2022 at 5:26

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

answered Sep 30, 2022 at 8:13

mojtaba

492 bronze badges

1 Comment

Ranjithkumar Over a year ago

I did the same mistake.

tk_ · Accepted Answer · 2018-08-03 03:49:56Z

2

I had a similar issue. I had child.js and a common.js files. In my case, My HTML file was using both the JS files and both of them had a function with the same name,

child.js

function hello(){}

and also

common.js

function hello(){}

After I remove one of these my code works fine and onclick started working. hope this helps!

answered Aug 3, 2018 at 3:49

tk_

17.5k9 gold badges88 silver badges90 bronze badges

Comments

Sean · Accepted Answer · 2022-01-30 00:43:52Z

2

Add:

type="button"

to the button element. The default type is "submit" which is submitting the form before the script is run.

answered Jan 30, 2022 at 0:43

Sean

2,1292 gold badges26 silver badges31 bronze badges

1 Comment

Sergey A Kryukov Feb 12 at 23:43

No, it is not related to the problem.

LordDeath · Accepted Answer · 2023-01-18 03:18:14Z

2

For other devs with more advanced code, sometimes an absolute position element is blocking the button. Make sure no element is blocking the button(s) from being clicked.

answered Jan 18, 2023 at 3:18

LordDeath

212 bronze badges

Comments

Mara Tata San · Accepted Answer · 2022-09-20 14:37:41Z

I had the same issue, for me, it did not work because of my main.js having type="module", if you don't need type="module" this will work.

<body>
    <button onclick="onBtSave()">Save filter model script type module</button>
    <button onclick="onBtRestore()">Restore filter model no script type</button>
    
    <script type="module">
      // broken 
      function onBtSave() {
        console.log("saving current filter model");
      }
    </script>
    <script >
      // working 
      function onBtRestore() {
        console.log("restoring current filter model");
      }
    </script>

Adhin Neupane · Accepted Answer · 2022-10-11 20:28:56Z

using onclick vs EventListeners.

The question is a matter of browser compatibility and necessity. Do you need to attach more than one event to an element? Will you in the future? Odds are, you will. attachEvent and addEventListener are necessary. If not, an inline event may seem like they'd do the trick, but you're much better served preparing for a future that, though it may seem unlikely, is predictable at least. There is a chance you'll have to move to JS-based event listeners, so you may as well just start there. Don't use inline events.

jQuery and other javascript frameworks encapsulate the different browser implementations of DOM level 2 events in generic models so you can write cross-browser compliant code without having to worry about IE's history as a rebel. Same code with jQuery, all cross-browser and ready to rock:

$(element).on('click', function () { /* do stuff */ });

Don't run out and get a framework just for this one thing, though. You can easily roll your own little utility to take care of the older browsers:

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

// example ~``` addEvent( document.getElementById('myElement'), 'click', function () { alert('hi!'); } );

Try it: http://jsfiddle.net/bmArj/

Taking all of that into consideration, unless the script you're looking at took the browser differences into account some other way (in code not shown in your question), the part using addEventListener would not work in IE versions less than 9.

Jacob Harris · Accepted Answer · 2024-03-22 21:30:17Z

1

I had a similar issue because of type="module" in my HTML script tag. Exporting the needed function using the export keyword makes the function available to be imported in the HTML.

answered Mar 22, 2024 at 21:30

Jacob Harris

111 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Jishnu V S · Accepted Answer · 2017-03-01 11:25:11Z

0

There is no problem with your code.. run this snippet

function hello() {
alert('Hello');
}

<button onclick="hello();">Hello</button>

and if you want to alert this on window load. change your code like this way

(function(){
  alert('hello')
})();

edited Mar 1, 2017 at 11:25

answered Mar 1, 2017 at 11:17

Jishnu V S

8,4377 gold badges30 silver badges59 bronze badges

2 Comments

kind user Over a year ago

It doesn't change anything.

Quentin Over a year ago

Not being able to reproduce the problem doesn't answer the question.

LaJ HerE · Accepted Answer · 2022-08-14 21:52:27Z

0

In my case there are was two same elements with position: absolute. I set onclick on the first one so it haven't been called because second element was covering it

answered Aug 14, 2022 at 21:52

LaJ HerE

32 bronze badges

Comments

username · Accepted Answer · 2022-09-29 12:35:34Z

0

This happened to me when I opened another folder in visual studio code. I just opened new window of visual studio code and only opened one folder this time and it now works

edited Sep 29, 2022 at 12:35

answered Sep 29, 2022 at 12:35

username

11 bronze badge

Comments

Andrew Kelley · Accepted Answer · 2023-04-01 23:42:47Z

0

I ran into the same problem when I had a button with an id that exactly matches the JavaScript function name. After changing one of them so that the id and function name don't match, it worked.

answered Apr 1, 2023 at 23:42

Andrew Kelley

1777 bronze badges

Comments

person the human · Accepted Answer · 2023-07-28 18:40:47Z

0

For anyone who may be half as dumb as I am, make sure you didn't make a backup of your code and keep the backup open in your browser while adding your button in the new code.

answered Jul 28, 2023 at 18:40

person the human

4154 silver badges16 bronze badges

Comments

Yasin Hamad · Accepted Answer · 2025-02-12 13:43:03Z

0

If you are working on php project and the function is in the file and that problem happend just put

<script src="js/fuctions.js?v=<?php echo time(); ?>"></script>

that worked for me.

edited Feb 12 at 13:43

answered Feb 12 at 13:41

Yasin Hamad

11 bronze badge

Collectives™ on Stack Overflow

JavaScript button onclick not working

16 Answers 16

1 Comment

Comments

4 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

1 Comment

Comments

4 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related