How to activate alert function in html

Question

This is a basic question of javascript.

I'm doing my personal webpage. When people click the button ("botón") this message should appear: "clicked!"

My html5:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>omargonzalesdiaz.com</title>
    <link href="website.css" rel="stylesheet"/>
    <script src="script.js"></script>

</head>

This is the specific part of the button:

<input type="email" placeholder="Your email">
<input type="submit" placeholder="Send">
<button>botón</button>

My javascript code: (stored in the file: "script.js")

 $("button").on("click", function() {
    alert("clicked!")
  });

But i click and no message appear (Chrome or Firefox).

UPDATE 1:

Apparently, i was following a Jquery tutorial. I need to do that in basic javascript. What should i do. Code examples are welcome.

UPDATE 2: Based on suggestions, my code still does not work.

<input type="email" placeholder="Your email">
<input type="submit" placeholder="Send">
<button id="myButton">botón</button>

My new script:

document.getElementById('myButton').addEventListener('click', function(){
      alert('clicked');
    }), false);

There are lots of answers here with a non-jquery solution, any of them will work — atmd, Aug 03 '15 at 14:39
possible duplicate of [javascript popup alert on link click](http://stackoverflow.com/questions/8813674/javascript-popup-alert-on-link-click) — Liam, Aug 03 '15 at 14:40
I hate random down votes of simple questions, everyone was a beginner once people. Just because the question is simple does not make it bad. This is well explained and shows willing, give the guy a break +1 — Liam, Aug 03 '15 at 14:42
Can you show where your script is in relation to where your html is (i.e. is your script in the `head`? end of the `body`? — atmd, Aug 03 '15 at 15:17
Solved. I had installed other editor, and there was a conflict. I have uninstalled it and now the solutions provided work perfect. — Omar Gonzales, Aug 03 '15 at 15:19

baao · Accepted Answer · 2015-08-03T15:05:08.983

2

    document.getElementById('myButton').addEventListener('click',function(){
    alert('Clicked!');
});

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>omargonzalesdiaz.com</title>
</head>
<body>
     <input type="email" placeholder="Your email">
     <input type="submit" placeholder="Send">
     <button id="myButton">botón</button>

</body>
</html>

Make sure to place your script right in front of the closing </body> tag, the elements can't be found if the DOM isn't loaded at the time your script gets loaded:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>omargonzalesdiaz.com</title>
    <link href="website.css" rel="stylesheet"/>
</head>
<body>
     <input type="email" placeholder="Your email">
     <input type="submit" placeholder="Send">
     <button id="myButton">botón</button>
<script src="script.js"></script>
</body>
</html>

script.js

document.getElementById('myButton').addEventListener('click',function(){
    alert('Clicked!');
});

edited Aug 03 '15 at 15:05

answered Aug 03 '15 at 14:26

baao

71,625
17
143
203

simply copy the code above, this works. Obviously, better include the script in your script.js file @OmarGonzales – baao Aug 03 '15 at 15:00
why do you refer "script.js" if you are putting the code in the body of the html? – Omar Gonzales Aug 03 '15 at 15:02
I wasn't sure what the file does for you, as I wrote, better put the whole javascript in there! @OmarGonzales – baao Aug 03 '15 at 15:02
Thanks for you detailed help. There was a conflict with my komodo Editor and other editor over my js file. – Omar Gonzales Aug 03 '15 at 15:24
You're welcome! Nice that you have got it working now! – baao Aug 03 '15 at 15:24

score 2 · Answer 2 · edited Aug 03 '15 at 14:39

2

You should add an id to your button, then:

document.querySelector("#mybutton").addEventListener("click",function(){
     alert("BUTTON CLICKED");
});

Where mybutton is your button ID. Try to work with IDs so your DOM query isn't getting more than one element.

Example:

http://jsfiddle.net/fthupjpd/

EDIT: Don't use jQuery for that :)

edited Aug 03 '15 at 14:39

Liam

27,717
28
128
190

answered Aug 03 '15 at 14:30

Neoares

439
11
24

@atmd are you sure? I'm doing a querySelector... just check the example, mate. – Neoares Aug 03 '15 at 14:33
Sorry, my bad, eyes blinded by getElementBy, will remove my comment and upvote – atmd Aug 03 '15 at 14:37

atmd · Answer 3 · 2015-08-03T14:38:11.860

1

You dont have the jquery lib in your html, but you are using $, which is part of jquery (it's the facade for the api/lib)

add:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

before you cann you click code. You need to also make sure the dom has loaded when you call you event handler, try:

$(function () {
  $("button").on("click", function() {
    alert("clicked!")
  });
});

IF you dont want to use jQuery, give your button an id

<button id="myButton">botón</button>

then in your code

document.getElementById('myButton').addEventListener('click', function(){
  alert('clicked');
}), false);

Here are the docs on native event handlers

edited Aug 03 '15 at 14:38

answered Aug 03 '15 at 14:27

atmd

7,430
2
33
64

I want to learn core javascript. I don't want to use JQuery, what should i do? – Omar Gonzales Aug 03 '15 at 14:28
@OmarGonzales updated to include non jquery event handler – atmd Aug 03 '15 at 14:29
thank you so much for your help.But I had to give the check to michael. – Omar Gonzales Aug 03 '15 at 15:20
no problem, important part is you resolved your issue, doesnt matter who gets the 'answer tick' – atmd Aug 03 '15 at 15:21

score 1 · Answer 4 · answered Aug 03 '15 at 15:00

document.getElementById('myButton').onclick=function(){
    alert('clicked');
};

For a good start with JavaScript, I find W3schools very good:

http://www.w3schools.com/js/default.asp

EDIT

see Michael's answer for where to place your scripts when you need them to access the document elements. The body needs to be loaded before you can reference them on your JS code.

score 0 · Answer 5 · answered Aug 03 '15 at 14:28

You have two problems.

You haven't defined $. It looks like you are trying to use the jQuery library. You need to include that in your page before the script.
You are trying to bind an event handler to all the button elements in the document while the head section is being parsed. At that point, there is no button elements. You need to move the script element to after the button elements (or use a ready or load event hander).

How to activate alert function in html

5 Answers5