最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Attaching onclick event to element is not working - Stack Overflow

programmeradmin2浏览0评论

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>

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>
Share Improve this question edited Dec 13, 2013 at 21:02 Andrew Dawson asked Dec 13, 2013 at 20:51 Andrew DawsonAndrew Dawson 991 silver badge10 bronze badges 10
  • 1 Worked for me. What error do you get? Do you actually have an element with id='header'? – MikeSmithDev Commented Dec 13, 2013 at 20:53
  • 1 Works fine here jsfiddle/j08691/4EFv3. Where did you put your JavaScript in your page? – j08691 Commented Dec 13, 2013 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 Commented Dec 13, 2013 at 20:55
  • What does your JavaScript error console say? – Quentin Commented Dec 13, 2013 at 20:57
  • 1 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 Commented Dec 13, 2013 at 21:01
 |  Show 5 more ments

3 Answers 3

Reset to default 3

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./ready/

I think the solve you are looking for is

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

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?

发布评论

评论列表(0)

  1. 暂无评论