2 clickable blocks

<!doctype html> 
<html>  
  <head> 
    <meta charset="UTF-8"> 
    <title>2 clickable blocks</title> 
<style type="text/css">
 
#myDiv1 {
    width: 100px;
    height: 300px;
    background-color: green
}
 
#myDiv2 {
    width: 100px;
    height: 300px;
    background-color: blue
}
</style>

<script type="text/javascript">
 
        window.onload=function() {
             document.getElementById("myDiv1").onclick=function() {
             window.location.href="block1.php";
        }
    }

        window.onload=function() {
             document.getElementById("myDiv2").onclick=function() {
             window.location.href="block2.php";
        }
    } 
</script>
  </head> 
<body> 

<div id="myDiv1">
    <br><br>clickable block area1 <br><br><br> 1111
</div>
<div id="myDiv2">
    <br><br>clickable block area2 <br><br><br> 2222
</div>

</body> 
</html> 

I have the code above at http://dot.kr/x-test/2clickableBlocks.php which is one of my trials for two clickable blocks. But it seems not to work fine.

you need to assign the onclicks in just 1 window.onload()

 
<script type="text/javascript">
 
        window.onload=function() {
             document.getElementById("myDiv1").onclick=function() {
             window.location.href="block1.php";
             }

             document.getElementById("myDiv2").onclick=function() {
             window.location.href="block2.php";
             }
         }
</script>