Call a javascrtipt after button click

Question

I need to call a JavaScript after pressing a button with type button.

<button type='button' 
        class='btn btn-sm btn-primary pull-right m-t-n-xs' 
        style='width: 100%;' id='demo' onclick='demo();'>
          <strong>Edit</strong>
</button>

I've tried the JavaScript below but it has errors

 $('#demo').click(function() {
     alert('hey');
 });

For the JS above, it doesn't have an error but it doesn't alert..

document.getElementById("demo").onclick = function() { myFunction() };

function myFunction() {
    alert('hey');
}

The error for the js above is : Uncaught TypeError: Cannot set property 'onclick' of null at HTMLDocument.

window.onload = function() {
   document.getElementById("demo").onclick=function() {
     alert("Hello WOrld");
    }
}

The error for this last one is:

Uncaught TypeError: Cannot set property 'onclick' of null
at window.onload

you need a function called `demo` (it is currently missing from your js section) — Denis Tsoi, Mar 22 '17 at 03:33
read your html tag, the part where you set `onclick='demo();'` — Paul, Mar 22 '17 at 03:35
Possibly also relevant: http://stackoverflow.com/questions/20021628/function-doesnt-execute-from-an-onclick-inside-the-html — Paul, Mar 22 '17 at 03:47
To get better help, please click the edit link below your post and include the exact error messages you are seeing. — Paul, Mar 22 '17 at 03:48

MypKOT-1992 · Answer 1 · 2017-03-22T04:58:21.090

2

$('#demo').click(function() {
     console.log('hey');
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' class='btn btn-sm btn-primary pull-right m-t-n-xs' style='width: 100%;' id='demo'>
          <strong>Edit</strong>
</button>

edited Mar 22 '17 at 04:58

answered Mar 22 '17 at 04:43

MypKOT-1992

191
3

This works in all my browsers. @Domy: Are you sure you're not adding the button dynamically... after the document ready happened? – CodeHacker Mar 22 '17 at 07:53

Manngo · Answer 2 · 2017-03-22T07:47:54.297

1

I have removed the irrelevant parts of you code to simplify the answer. Here is a simpler HTML:

<button id="demo">Edit</button>

Note that you should not include JavaScript in the onclick attribute. That’s old school, and will only make your life more miserable.

Here is some sample JavaScript:

window.onload=function() {
    var button=document.querySelector('button#demo');
    button.onclick=doit;
}

function doit() {
    alert('clicked');
}

You certainly don’t need jQuery for this sort of thing.

For what it’s worth, you probably shouldn’t be using the style attribute either — that’s what the class attribute is there for. Also don’t use strong inside the button. It is semantically incorrect, and, if you want to text to be bold, use CSS on the button itself.

edited Mar 22 '17 at 07:47

answered Mar 22 '17 at 03:43

Manngo

14,066
10
88
110

It still doesn't work.. possibly because the button type is button? – Domy Mar 22 '17 at 04:18
It still doesn't work.. possibly because the button type is button? – Domy Mar 22 '17 at 04:31
No, you’re correct — I made a couple of typos. The `id` in the `button` element was wrong, and the string in the JavaScript didn’t match. I have also changed the name of the function for clarity. – Manngo Mar 22 '17 at 07:49

giri · Answer 3 · 2017-07-31T09:40:50.650

0

Here is the complete example: button is created with button type and onclick function is bonded. <button type="button" onclick="onClickHandler()">Click Me!</button>

`<script>
    // This function gets triggered when button is clicked.
    function onClickHandler(){
        alert("JS rocks");
    }
</script>`

edited Jul 31 '17 at 09:40

answered Jun 14 '17 at 09:11

giri

1
3

Please consider adding some explanations why this code snippet answers the question. – Clijsters Jun 14 '17 at 09:36

Call a javascrtipt after button click

3 Answers3