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, Mar 01 '17 at 11:19
see what error you are getting in console.as your code is working fine. — santosh gore, Mar 01 '17 at 11:23
@levi — Why would delaying the creation of the function help? If anything, that would break it because there could be a period between the button rendering and the rest of the page fully loading (especially if it includes large images) where the load event hasn't fired. — Quentin, Mar 01 '17 at 11:25
@Quentin - in some cases the DOM has not yet finished loading. sounds like a reasonable case to test for when an event is not firing from an inline onclick attribute. besides, it wouldn't break because no `var` was used when declaring `hello` - placing it right on the window. — , Mar 01 '17 at 11:56
@levi — "in some cases the DOM has not yet finished loading" — Which isn't a problem until you delay the creation of the function until after it has. — Quentin, Mar 01 '17 at 11:59
@levi — "sounds like a reasonable case to test for when an event is not firing from an inline onclick attribute" — Not when there is no DOM access going on in the existing JavaScript. — Quentin, Mar 01 '17 at 12:00
@levi — "it wouldn't break because no var was used when declaring hello" — The problem I described is one of **timing** not of scope. — Quentin, Mar 01 '17 at 12:00
@Quentin — even if its not the case, loading scripts in an onload or on DOMContentLoaded is a better practice. besides, I saw the comment from Kind user and saw that it was missing a function inside. it might not be the answer, but its not farfetch. if you have a better answer please share. — , Mar 01 '17 at 12:31
@levi — "loading scripts in an onload or on DOMContentLoaded is a better practice" — No, it isn't. Attaching event listeners then often is, loading scripts is not. — Quentin, Mar 01 '17 at 12:48
@levi — "if you have a better answer please share" — The question cannot be answered. The code in the question works. — Quentin, Mar 01 '17 at 12:48
@Quentin — "Attaching event listeners then often is, loading scripts is not" javascript is consisted not only of event listeners, but variable declarations, UI logic etc... you should look into it. — , Mar 01 '17 at 13:21
Facing the same issue here. Still don't know the root cause. — Johan, Aug 02 '23 at 06:25

Michael · Answer 1 · 2017-08-07T09:45:04.547

33

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 07 '17 at 09:45

answered Aug 07 '17 at 02:45

Michael

11,571
4
63
61

I was wondering why my method named clear wasn't being called... – Philip Dec 22 '20 at 09:31

score 18 · Accepted Answer · answered Mar 01 '17 at 11:17

18

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 01 '17 at 11:17

Kangjun Heo

1,023
1
8
19

score 10 · Answer 3 · answered Aug 20 '19 at 19:55

10

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 '19 at 19:55

Edward

495
1
6
20

this saved my day – Jaskaran Singh Nov 05 '20 at 12:18
1

makes no difference for me... – Dennis Hackethal Jul 01 '22 at 00:09

score 2 · Answer 4 · answered Aug 03 '18 at 03:49

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!

score 1 · Answer 5 · answered Jan 30 '22 at 00:43

1

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 '22 at 00:43

Sean

2,033
2
23
28

score 1 · Answer 6 · answered Sep 20 '22 at 14:37

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>

score 1 · Answer 7 · edited Oct 08 '22 at 05:26

1

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 08 '22 at 05:26

Nick Vu

14,512
4
21
31

answered Sep 30 '22 at 08:13

mojtaba

11
1

I did the same mistake. – Ranjithkumar May 01 '23 at 11:48

score 1 · Answer 8 · answered Oct 11 '22 at 20:28

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.

score 1 · Answer 9 · answered Jan 18 '23 at 03:18

1

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 '23 at 03:18

LordDeath

11
2

Jishnu V S · Answer 10 · 2017-03-01T11:25:11.207

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 01 '17 at 11:25

answered Mar 01 '17 at 11:17

Jishnu V S

8,164
7
27
57

It doesn't change **anything**. – kind user Mar 01 '17 at 11:20
5

Not being able to reproduce the problem doesn't answer the question. – Quentin Mar 01 '17 at 11:21

score 0 · Answer 11 · answered Aug 14 '22 at 21:52

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 '22 at 21:52

LaJ HerE

3
2

username · Answer 12 · 2022-09-29T12:35:34.577

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 '22 at 12:35

answered Sep 29 '22 at 12:35

username

1
1

score 0 · Answer 13 · answered Apr 01 '23 at 23:42

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 01 '23 at 23:42

Andrew Kelley

137
5

score 0 · Answer 14 · answered Jul 28 '23 at 18:40

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 '23 at 18:40

person the human

345
4
15

score -2 · Answer 15 · edited Dec 31 '21 at 14:12

-2

Write a semicolon after hello function like this

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

edited Dec 31 '21 at 14:12

Suraj Rao

29,388
11
94
103

answered Dec 31 '21 at 14:10

Michael Njuguna

98
1
5

This makes no difference... – Suraj Rao Dec 31 '21 at 14:13

JavaScript button onclick not working

15 Answers15

Linked

Related