Why doesn't anonymous function work for me in Javascript?_问答_开发者

Why doesn't anonymous function work for me in Javascript?

开发者 https://www.devze.com 2023-02-10 18:36 出处：网络

I am new to Javascript, and I am trying to get this function to work, but what ever I do I can\'t get anonymous functions to work, when I switch to the normal function it works. I know that I can live

I am new to Javascript, and I am trying to get this function to work, but what ever I do I can't get anonymous functions to work, when I switch to the normal function it works. I know that I can live without anonymous functions but it's really annoying me.

Example:

In the HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="C开发者_高级运维ontent-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript" src="ch10_2.js"> </script>
<body>
<a href="http://www.google.com" id="search_link">Go Searching</a> 
</body>
</html>

In the JavaScript file:

var s_link = document.getElementById("search_link"); 

s_link.onclick = function() {  
      var is_sure = window.confirm("Are you sure you want to leave?"); 
      if (!is_sure) { 
        window.alert("OK. You can stay here."); 
        return false; 
      } 
    };

There are several problems here, each on its own would cause this script to fail:

Script tag is an illegal position in the document - between the <body> and <head> tags. It must be inside one of those.
Script tries to access a variable named 's_link' which should point to the link. For it to reference the link, you need to fetch the element using something like getElementById() or other DOM traversal methods [Edit - I see you've added that line after posting the question].
If the script is ran before the the element (link) is rendered (as it is now), it would not affect the element since it does not exist in the document yet. Either wrap it in a function that runs on document load, or place the script after the element in the document.

The link with the id search_link doesn't exist at the time the script runs, so it can't be fetched with getElementById or similar. You need to delay the execution of the code (e.g. by wrapping it in a function that executes onload or just moving the <script> element to after the link is parsed (just before </body> is often recommended).

It works for me.

Suggestion: Make sure to put your code at the end of the page just before </body>.

You should tell your script to execute after the page has loaded. To do this just wrap the code as shown below:

window.onload = function() { 
    // code you had before
}

The reason for this is simple. The script is currently being executed before the page is loaded. As such the document.getElementById() request is actually failing. It has nothing to do with your function being anonymous.

Just as Mr. Dorward pointed out, your script (at ch10_2.js) is executed before de DOM is ready. The thing is, to attach an event to an element said element must exist but as javascript code is executed as soon as it is loaded the rest of the page is usually still loading. Therefore, the element you want to attach an event to does not exist yet.

I recommend this article about how jQuery (a javascript library) deals with this: http://www.learningjquery.com/2006/09/introducing-document-ready.

And here is a jsbin very simple example: http://jsbin.com/eziwu5/edit