JavaScript button onclick not working
Solution 1
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.
Solution 2
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>
Solution 3
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.
Solution 4
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!
Martin W
Updated on July 09, 2022Comments
-
Martin W almost 2 years
<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.
-
kind user about 7 yearsIt doesn't change anything.
-
Quentin about 7 yearsNot being able to reproduce the problem doesn't answer the question.
-
Jaskaran Singh over 3 yearsthis saved my day
-
Philip over 3 yearsI was wondering why my method named clear wasn't being called...
-
Suraj Rao over 2 yearsThis makes no difference...
-
Dennis Hackethal almost 2 yearsmakes no difference for me...