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.

Please avoid using document.write 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. — Kevin Ji
– Kevin Ji, Commented Dec 2, 2013 at 0:01

m59 · Accepted Answer · 2013-12-01 23:59:21Z

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 1, 2013 at 23:59

m59

43.9k14 gold badges122 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

MultiplyByZer0 Over a year ago

Why not? Inline JS is less complicated and more compact.

m59 Over a year ago

@sirnomnomz stackoverflow.com/questions/19002690/… Read all of the answers/comments on this post, for starters.

Felix Kling Over a year ago

@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).

SomeKittens Over a year ago

@MistressDavid aaaaand what happens when I want to change the name of the function I'm calling?

SomeKittens Over a year ago

@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 onclicks spread throughout my HTML? It's much easier to add a descriptive class and attach an event.

|

bagonyi · Accepted Answer · 2013-12-01 23:59:24Z

1

You are missing the () after ayee:

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

answered Dec 1, 2013 at 23:59

bagonyi

3,3182 gold badges24 silver badges21 bronze badges

Comments

madmanali93 · Accepted Answer · 2013-12-02 00:10:59Z

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 2, 2013 at 0:10

madmanali93

2832 silver badges12 bronze badges

Comments

Panoctopus · Accepted Answer · 2013-12-02 00:02:16Z

0

You need brackets on the function call:

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

answered Dec 2, 2013 at 0:02

Panoctopus

413 bronze badges

Collectives™ on Stack Overflow

Why isn't function performing on button click?

4 Answers 4

13 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

13 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related