Clickable block area

JavaScript
1 
<!doctype html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title>clickable block4</title> 
  </head> 
<body> 

<div style="width:200px;height:100px;background-color:green;[COLOR="Red"]href:next.php[/COLOR]">

    <br><br>clickable block area <br><br><br>
  
</div>
</body> 
</html>

I have the code above at http://dot.kr/x-test/clickableBlock4.php .
The code “href:next1.php” in red doesn’t work at all.
But it will show what I want.

I like to make it like the following.

If a user clicks anywhere inside the green box,
it will go to next.php.

2

that’s because href is not a style.

3

try something like this

 
<!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">
<head>
<title></title>
<style type="text/css">
 
#myDiv {
    width: 100px;
    height: 100px;
    background-color: green
}
 
</style>
<script type="text/javascript">
 
        window.onload=function() {
             document.getElementById("myDiv").onclick=function() {
             //alert("div clicked");
            window.location.href="next.php";
        }
    }
 
</script
</head>
<body>
 
 <div id="myDiv"></div>
 
</body>
</html>
Off Topic:

I’m taking pmw57’s advice and trying to wean myself off inline javascript

4

Your code works fine, thank you.

I like to make it clear.
Do you recomend me to use outer javascript which is something like <script src=‘outer.js’ type=‘text/javascript’></script> instead of inline javascript?

5

what I meant with my ot comment is related to this interesting thread

6

There are two different techniques that would apply here.

The first technique is using an external script file as opposed to inline scripting.

This is an example of inline scripting (not recommended):


<script type="text/javascript">
// script code here
</script>

Some of the problems with inline scripting is that it’s not portable, and there may be character code issues where parts of the script are interpreted as if they were HTML code. Some people tend to use inline scripting for testing, or development, and it can make it easier to post working solutions to the forum. Such behaviour though is not to be construed as support for inline scripting.

The preferred technique is to place your scripts in a separate file


<script type="text/javascript" src="js/script.js">

js/script.js


// script code here

The second technique is using traditional scripting events, instead of inline events.

Here is an example of an inline event (not recommended):


<body onload="document.getElementById("myDiv").onclick = function () { window.location.href = "next.php";}">

It’s clearly obvious that it’s not possible to store your script code in a separate file when using this technique.

The preferred technique is to use attach the script to the onload event by using traditional event registration techniques


window.onload = function () {
    document.getElementById("myDiv").onclick = function () {
        window.location.href="next.php";
    };
};

Here are some good resources on events, and different ways of handling them.
Introduction to events
The events
Early event handlers
Traditional event registration model
Advanced event registration models

Event accessing

Event properties

Event order
Mouse events

7
Off Topic:

I find it interesting that you talk about attaching an onload event to the document.body and not the window.

I used to do the same thing by default, either in the html or in the js, until I read somewhere that window.onload is better. The reason, they said, is because even though the <body> has finished loading images referenced in <img>'s might not have finished downloading yet (since they are downloaded in parallel to the rest of the <body>) whch could then interfere with other behaviours (via js or whatever) on the page.

But when the window.onload event is triggered then the <body> element and all the images have finished loading into the browser.

Is this correct or are there other differences between document.body.onload and windpw.onload?

8

You’re right. window.onload is the preferable one to use. Most browsers send document events to the window, Opera I think being the odd one out

I’ll update the previous post to use the more widely accepted window.onload event instead.