<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.
JavaScript button onclick not working
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.
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> I was wondering why my method named clear wasn't being called... –
Buffer
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.
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.
this saved my day –
Merc
makes no difference for me... –
Dercy
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> I did the same mistake. –
Woodall
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!
Add:
type="button"
to the button element. The default type is "submit" which is submitting the form before the script is run.
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.
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>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.
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')
})(); It doesn't change anything. –
Discomposure
Not being able to reproduce the problem doesn't answer the question. –
Maladjusted
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
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
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.
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.
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.
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. –
Adjure
Write a semicolon after hello function like this
<button onclick="hello();">Hello</button>
This makes no difference... –
Seventeenth
© 2022 - 2024 — McMap. All rights reserved.
varwas used when declaringhello- placing it right on the window. – Pouliot