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

Question

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="Content-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; 
      } 
    };

Eran Galperin · Accepted Answer · 2011-02-13 14:15:22Z

3

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.

answered Feb 13, 2011 at 14:15

Eran Galperin

86.9k24 gold badges119 silver badges132 bronze badges

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

Comments

Quentin · Accepted Answer · 2011-02-13 14:12:57Z

0

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

answered Feb 13, 2011 at 14:12

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

1 Comment

Arjen Over a year ago

sorry i actually did define it ,but i forgot to write it in here

Sarfraz · Accepted Answer · 2011-02-13 14:15:08Z

0

It works for me.

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

answered Feb 13, 2011 at 14:15

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Comments

diolemo · Accepted Answer · 2011-02-13 14:21:34Z

0

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.

answered Feb 13, 2011 at 14:21

diolemo

2,6712 gold badges21 silver badges28 bronze badges

Comments

slacktracer · Accepted Answer · 2011-02-13 14:50:35Z

0

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

answered Feb 13, 2011 at 14:50

slacktracer

6,3066 gold badges30 silver badges34 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related