PDA

View Full Version : [SOLVED] Javascript problem


Peter76
March 14th, 2011, 04:34 PM
I have the following html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Click Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-style-type" content="text/css"/>
<script src="clicktest.js" type="text/javascript"></script>
</head>
<body>
<div id="clicktst">Hello World</div>
</body>
</html>

And the following javscript file:

window.onload = function() {
var maskDiv = document.getElementById( "clicktst" );
if ( maskDiv ){
maskDiv.style.cursor = "pointer";
maskDiv.onclick = alert( "ok" );
}
}

The problem is that when I open the html in FF, a popup shows with ok, but when I click on the div nothing happens, though the mouse arrow is correctly set to pointer.
What am I doing wrong here, guess it's something very obvious, but I can't find what.

Thanks, Peter
LoneWolfJack
March 14th, 2011, 04:57 PM
the "onload" event handler is executed as the element is loaded, after than, you need to use a different event handler like onclick.
An Sanct
March 14th, 2011, 04:59 PM
You are using

window.onload, which is the function called when <body> is parsed, instead of something like


<IMG SRC="button.gif" WIDTH=64 HEIGHT=32 ALT="Button" ONMOUSEDOWN="alert('ok!')">

Take a look here w3School (http://www.w3schools.com/js/tryit.asp?filename=tryjs_events)
lykeion
March 14th, 2011, 05:42 PM
I'm not a JavaScript guy (Java coders have a tendency to dislike it) but something like this:

window.onload = function() {
function handleElement(id) {
if (document.getElementById) {
var maskDiv = document.getElementById(id);
maskDiv.style.cursor = "pointer";
maskDiv.onclick = function() { alert("OK"); }
}
}

handleElement("clicktst");
}
Take a look here: http://www.quirksmode.org/js/contents.html
Peter76
March 14th, 2011, 06:36 PM
@lykeion, thank you so much!; wrapping alert() in an anonymous function did the trick!
DOes anybody know why you have to wrap alert() in a function like this to get it to work, but can call a normal function directly?

Thanks, Peter
myrtle1908
March 15th, 2011, 12:21 AM
DOes anybody know why you have to wrap alert() in a function like this to get it to work, but can call a normal function directly?

Because the event handler must be a function reference, not a function call.
Peter76
March 15th, 2011, 11:15 PM
Because the event handler must be a function reference, not a function call.

Thanks for that! I'll do some more reading on that:D

Peter