Attaching onclick event to element is not working

Question

I just started learning Javascript, and I know next to nothing. I am trying to attached an onclick event to an element in my HTML.

var joinList = function() {
    alert("This should display when clicked");
}
document.getElementById("header").onclick = joinList;

This is my code so far. Nothing happens when the element with the ID of header is clicked on. What am I doing wrong?

the following is my HTML code

<!DOCTYPE html>
<html>
    <head>
        <title>Testing Page</title>
        <script src="testing.js"></script>
    </head>

    <body>
        <h1 id="header">Andrew Dawson</h1>
    </body>
</html>

Worked for me. What error do you get? Do you actually have an element with `id='header'`? — MikeSmithDev, Dec 13 '13 at 20:53
Works fine here http://jsfiddle.net/j08691/4EFv3/. Where did you put your JavaScript in your page? — j08691, Dec 13 '13 at 20:54
I am using an external js file. I know the file is connected correctly because I inculded an alert statement at the top of the js file and it ran when the page loaded. I also double checked the name of the id and it is indeed header. — Andrew Dawson, Dec 13 '13 at 20:55
In case it was not clear in my question or from my code. The alert message is suppose to display when the user clicks on the element with the id of header. — Andrew Dawson, Dec 13 '13 at 20:58
Nothing. Nothing happens at all. Well the HTML loads but when I click on the header nothing happens. — Andrew Dawson, Dec 13 '13 at 20:59
please post your HTML code as well, so we can see the issue, maybe the dom element is not declared as an id or something like that — xhallix, Dec 13 '13 at 21:00
Have you tried loading the code before the closing body tag? You want to make sure you're not trying to execute code on elements that don't yet exist. — j08691, Dec 13 '13 at 21:01
Oh I think that might be the problem. How do I ensure the code does not run until the DOM loads. Do I need an onload function? — Andrew Dawson, Dec 13 '13 at 21:03
Just have the script tag as the last element in body. Then it will be executed after DOM is loaded. — juminoz, Dec 13 '13 at 21:07

xhallix · Accepted Answer · 2013-12-13T21:13:48.253

The issue is, that you try to load a html element, which does not "exists" when the javascript function is executed, because the dom has not finished loading. To make your code work, you can try following solutions:

Place your script tag below in the HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Testing Page</title>
    </head>

    <body>
        <h1 id="header">Andrew Dawson</h1>
        <script src="testing.js"></script>
    </body>
</html>

Add an event handler to check if the window element is ready:

window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded(){

    var joinList = function() {
        alert("This should display when clicked");
    }
    document.getElementById("header").onclick = joinList;

}

Another solution would be to use jquery framework and the related document ready function http://api.jquery.com/ready/

score 2 · Answer 2 · answered Apr 30 '20 at 18:42

2

I think the solve you are looking for is

var joinList = function() {
    alert("This should display when clicked");
}
document.getElementById("header").setAttribute("onclick", joinList);

answered Apr 30 '20 at 18:42

Shawn Beaton

21
1

I needed to use string instead of the function: `span.setAttribute('onclick', 'event.stopPropagation()')` – andreshg112 Sep 02 '22 at 20:44

score 0 · Answer 3 · answered Feb 09 '18 at 10:04

Your code seems straight forward, maybe your script is running before the DOM fully loads. To keep it simple across all browsers we can place a self executing anonymous function at the end to initiate all your scripts after DOM loads.

  <html>
  <title></title>
  <head></head>
  <body>
  html here!!
  <script>

    (function() {  
       //Any other scripts here

       var joinList = function() {
             alert("This should display when clicked");
         }
       document.getElementById("header").onclick = joinList;


     })();

   </script>
   </body>
   </html>

The above is purely javascript, not to be confused with the shorthand (see below) of the jquery "document onready" function (you would need to add jquery to your pages).

$(function() {
        //your javascript code here
});

Why using self executing function?

Attaching onclick event to element is not working

3 Answers3