How to add an onclick button event?

Question

I have added a small onclick event to a button in my html form and its not working.This is the one I added,which is a basic one

function myFunction()
{
alert("Hello World!");
}

and in html

<button onclick="myFunction" class="btn btn-1 btn-1c">Credit Card</button>

But this is not working,please check the fidddle http://jsfiddle.net/RzT68/8/ .Another pop up is coming if the field are not filled,but I cant figure out,how to remove it during clicking on a button.

Don't use inline js. Instead, you could get a reference to the element using javascript's `document.getElementById('myId')`, `document.querySelector('selectorHere')`, or if using jQuery, `$('selectorHere')`. Then attach the event using `element.addEventListener('click', myFunction)` or jQuery's `$(element).click()`. — m59, Nov 28 '13 at 00:36

score 3 · Accepted Answer · edited May 23 '17 at 12:28

3

Demo http://jsfiddle.net/f8Fd3/

Here is the demo with your code :)

@DownVoter, care to explain please?

OP As m59 said to be bit more evanglistic instead of putting the inline click

Please read this Why is using onClick() in HTML a bad practice?

another demo with lil diff code: http://jsfiddle.net/6wwe2/

OP rest this should fit your need! :))

code

<button onclick="javascript:myFunction()" class="btn btn-1 btn-1c">Credit Card</button>

enter image description here

edited May 23 '17 at 12:28

Community

1
1

answered Nov 28 '13 at 00:20

Tats_innit

33,991
10
71
77

I didn't downvote, but I almost would because you're encouraging the use of inline js rather than reprimanding it. – m59 Nov 28 '13 at 00:34
@m59 Good point I will update **BUT** seems like he/she is working on legacy code, so want to fix the problem without disturbing the apple cart! `:))` http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice – Tats_innit Nov 28 '13 at 00:35
1

Thanks =D Maybe one day, we'll never have to look at inline js again. – m59 Nov 28 '13 at 00:39
@m59 `:))` Thanks to you! heh, I wish bruv! But as long as we rewrite every piece of code it will stay! **Big Ball Of Mud** destination of most of the massive systems courtsey n00b devs or steadfast devs since the software industry was born, but I am too young to say that `:)` – Tats_innit Nov 28 '13 at 00:41

score 2 · Answer 2 · answered Nov 28 '13 at 00:26

2

Try this, as per my understanding your question

<button onclick="myFunction();" class="btn btn-1 btn-1c">

Demo

answered Nov 28 '13 at 00:26

Amit

15,217
8
46
68

3

With your rep, you really ought to be telling people not to use inline js, rather than teaching them to. – m59 Nov 28 '13 at 00:33

score 2 · Answer 3 · answered Nov 28 '13 at 00:26

2

When using onclick, you have to format the function like this:
<button onclick="myFunction()" class="btn btn-1 btn-1c">Credit Card</button>
With parentheses after your function name.

answered Nov 28 '13 at 00:26

jtw678

67
10

1

Inline js is awful. The best answer is "DON'T DO THIS!". – m59 Nov 28 '13 at 00:32

score 1 · Answer 4 · answered Nov 28 '13 at 00:28

In your JSFiddle, you select no wrap (head) in the dropdown on the left. When onLoad is selected (by default), your functions are defined within a local scope.

See working example: http://jsfiddle.net/f7W94/

In your fiddle select no wrap (head) in the dropdown on the left, click Run and it will work.

Also, you should format the onclick event as a function call, e.g. myFunction() not myFunction.

score 1 · Answer 5 · edited Nov 28 '13 at 14:51

By writing myFunction you are not executing the function, instead returning the function definition. To execute the function you append the () so it should be;

onclick='myFunction()'

This is confusing at first but makes sense as you start delving into call backs. For instance, when you supply a callback function to something;

success: mySuccessFunction,
error: myErrorFunction

etc you don't put the () because otherwise the functions would execute as the code is ready. Instead you supply the function definition so that the code can execute that function when it wants.

score 0 · Answer 6 · answered Nov 28 '13 at 00:24

0

If you're using jQuery:

$('.btn-1c').click(myFunction);

is the simplest implementation. Given the code you've provided, I can't really help you much further, but there are better ways.

answered Nov 28 '13 at 00:24

Jason

51,583
38
133
185

score 0 · Answer 7 · answered Nov 28 '13 at 00:26

HTML

<button class="btn btn-1 btn-1c">Credit Card</button>

jQuery

$(function() {
       $("button").click(function(){
              alert("Hello World!");
              return false;
        });
 )};

working jsfiddle: http://jsfiddle.net/farondomenic/B4k4T/

How to add an onclick button event?

7 Answers7