Hi all. I am self-studying Javascript, and I have encountered a few problems with exercises from the book I am using. All problems seem to be related to the onclick() method and the function I am defining.
In the latest exercise, I am supposed to use a confirm button to see if a person really wants to leave a site. If they click the link, they should get the confirm pop-up box, and if they click cancel, they should get an alert box saying they’ll stay here.
I am following the code exactly as it is in the book, but instead of the confirm box, the browser immediately follows the link. I have included the code below.
This problem also occurred in an earlier exercise covering the innerHTML property. There’s a math problem, and when you click the link, the answer is supposed to supplant the problem. I have included the code in the first reply to this message.
Please note that on the second problem, I do think there was an error in the book. I think that in the line “answer_link.onclick = function() {”, the variable should have been a_link, not answer_link. However, I have tried it both ways and neither works.
Please give me any input on this. If it matters, I am using Firefox 3. Thanks!
Code:
<script type=“text/javascript”>
var s_link = document.getElementById(“search_link”);
s_link.onclick = function () {
var is_sure = windows.confirm("Are you sure you want to leave?");
if (!is_sure) {
window.alert("OK. You can stay here.");
return false;
}
};
</script>
</head>
<body>
<a href="http://www.google.com" id="search_link">Go Searching</a>
</body>
Here is the code for the innerHTML property problem. Again, I have followed the code exactly as it is in the book, and I have also tried substituting a_link for answer_link on the line with the onclick method.
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<title>The innerHTML Property</title>
<script type=“text/javascript”>
var d1 = document.getElementById(“div1”);
var a_link = document.getElementById(“answer_link”);
answer_link.onclick = function () {
d1.innerHTML = "That is easy, the answer is <strong>4</strong>!";
return false;
};
</script>
</head>
<body>
<div id="div1">
What is 2+2?
</div>
<div id="div2">
<a href="answer.html" id="answer_link">Get the answer</a>
</div>
</body>
When the page runs the script, here is what it knows about the page:
Notice how there is no body content yet? The script doesn’t know about anything that’s below it.
What book are you learning from? I’d like to take a look at that same book so that I can give you the best advice, based on how the book is intending to teach you other things.
It’s the “Javsacript: A Beginner’s Guide” book isn’t it.
Have a closer read of the page, specifically the line that start with “Next”.
Also, have a look at a previous code example in section 9-2. You’ll see that the script goes to the end of the body so that it is capable of manipulating the DOM above it.
Also, go back to near the start of the book, titled “Script Tags: Head or Body Section” (page 68 in the 3rd edition) where they cover this issue in more detail.
Thanks! You were right about the first problem I posted. After moving the script below, the exercise worked.
The second problem is on page 237 of the book (you were right on that also!). It does not have the script anywhere in the body on that one. Any thoughts?
This book was written a while ago, and I get the feeling that the author is uncomfortable with the transition of calling scripts. He realizes that scripts at the end of the body are easier and more convenient, but he’s not confident enough to fully follow through with it.
On page 237 is shown two snippets of code. Some JavaScript, and some HTML. There is no other information provided there about where they go, so he’s leaving it up to you to decide how to handle it.
Do you just call the script from the end of the body, or do you wrap it in a page loading event in the head? He’s leaving that type of decision up to you.
The standard advice around here is to put the script at the end of the body.
I tried moving the script to the bottom of the body, and it didn’t work. When I do that, the browser tries to go to the link answer.html, even though I have a “return false” at the end of the function. And of course there is no such link because the script is not supposed to go there.
If I leave the script as is and in the head, I get an error, “answer_link is not defined.”
If I change answer_link to a_link (which I think would be correct since there is a variable named a_link, not answer_link), I get the error message, “a_link is null.”