Why isn't function performing on button click?

Question

For some reason, I cannot get my function to perform on the click of a button. I've learned mainly on codeacademy.com and unfortunately they don't give much real world application.

Here is my code:

<script>
    var ayee = function() {
        confirm("Ready to play?");
        var age = prompt("How old are you?");
        if (age >= 18) {
            document.write("Let's get started then!");
        }else{
            document.write("You're under 18? Be careful out there....");
        }
    }               
</script>
<button type="button" onclick="ayee" value="click" />

Much thanks.

Learn more about [functions](http://eloquentjavascript.net/chapter3.html) and [event handling](http://www.quirksmode.org/js/introevents.html). — Felix Kling, Dec 02 '13 at 00:00
Please [avoid using `document.write`](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) after the page has already loaded... use `innerHTML` or standard DOM functions instead. Also, instead of using an `onclick` attribute, it's better to attach a `click` event handler to your button by giving it an `id` and using `document.getElementById`. — kevinji, Dec 02 '13 at 00:01

score 6 · Answer 1 · answered Dec 01 '13 at 23:59

6

You need to invoke the function with (). Like this: ayee().

However, you shouldn't be using inline-js at all. Instead, you should do this:

Live demo here (click).

<button id="myButton">My Button</button>

JavaScript:

var myButton = document.getElementById('myButton');
myButton.addEventListener('click', ayee);

function ayee() {
  //do something
}

and don't use document.write here. You almost never need to use that, and if you do, be sure you really do.

answered Dec 01 '13 at 23:59

m59

41,346
14
107
131

Why not? Inline JS is less complicated and more compact. – MultiplyByZer0 Dec 02 '13 at 00:16
oh i see what you mean about inline JS but what is the advantage of using external vs inline? – sirnomnomz Dec 02 '13 at 00:17
@sirnomnomz google it. It's not about advantages of external, it's about the disadvantages of inline. – m59 Dec 02 '13 at 00:22
1

@sirnomnomz http://stackoverflow.com/questions/19002690/why-inline-javascript-is-bad Read all of the answers/comments on this post, for starters. – m59 Dec 02 '13 at 00:35
Inline JS is also better for code maintaince, because you can see what function's gonna be called when a button is pressed, without having to hunt through JS code or externel files. – MultiplyByZer0 Dec 02 '13 at 00:41
3

@MistressDavid: In production code you should not use inline event handlers, it violates the principle of separation of concerns. You should not mix *content* with *application logic*. There are also some very confusing behaviors with inline event handlers, e.g. adding the properties of ancestor elements to the scope of the handler. That said, for just trying stuff out, it's OK (as long as you are aware of the quirks). – Felix Kling Dec 02 '13 at 00:45
@FelixKling so agreed. I evangelize about it because people ARE using it for production. Literally every Joomla extension I've ever seen used it. Anytime it appears in a post, it is almost a certainty that the the user is going to go on to use it in real code. – m59 Dec 02 '13 at 00:49
1

@MistressDavid aaaaand what happens when I want to change the name of the function I'm calling? – SomeKittens Dec 02 '13 at 01:22
@SomeKittens you chaaaange the code in the onclick (note: you'd have to do the exact same thing using m59's method, so what's your point?!?!?) – MultiplyByZer0 Dec 02 '13 at 03:54
@MistressDavid His point is that you can deal with the changes in one place (js) rather than two (js, html), aka readability and maintainability. http://en.wikipedia.org/wiki/Separation_of_concerns – m59 Dec 02 '13 at 04:05
@SomeKittens aaaaand what happens when you want to change the id of an element? – MultiplyByZer0 Dec 02 '13 at 07:07
@MistressDavid heh, in my opinion, selecting things by id is *generallly* outdated, but alternatives are far more in depth than what makes sense to use in a simple post. I generally have about 5 id's at most in my whole document. Aside from that, your question could be just as silly as asking what you would have to do if you removed the button altogether. If you understand the simple principle here, you wouldn't be asking things like this. HTML doesn't "DO" anything, so it doesn't need references to functions. JavaScript makes things "do" something, so it needs a reference to them. – m59 Dec 02 '13 at 14:11
1

@MistressDavid IDs are supposed to be unique, there will only be one in the document, so I only need to change it in one place. What if I've got three dozen `onclick`s spread throughout my HTML? It's *much* easier to add a descriptive class and attach an event. – SomeKittens Dec 02 '13 at 15:05

score 1 · Answer 2 · answered Dec 01 '13 at 23:59

1

You are missing the () after ayee:

<button type="button" onclick="ayee()" value="click" />

answered Dec 01 '13 at 23:59

bagonyi

3,162
2
19
20

score 0 · Answer 3 · answered Dec 02 '13 at 00:02

0

You need brackets on the function call:

<button type="button" onclick="ayee()" value="click" />

answered Dec 02 '13 at 00:02

Panoctopus

41
3

score 0 · Accepted Answer · answered Dec 02 '13 at 00:10

0

Name the function

function ayee() {
  //insert your code
}

Call the function on click with the paranthesis

<button type="button" onclick="ayee()" value="click" />

This should do it.

answered Dec 02 '13 at 00:10

madmanali93

274
1
12

Why isn't function performing on button click?

4 Answers4