Questor21
02-04-2006, 11:09 PM
This script is an extended test.
When I click on any of the divs, whose id's range between 1-4, I should get an alert box indicating the id of the div I clicked on. Instead I get the error that x[...].id is null or not an object. Any ideas?. Any ideas?
<html>
<head>
<title>A test</title>
<style>
.default
{
margin-top: 5px;
width: 400px;
border: 2px outset #DDDDDD;
background-color: #E2FFA2;
cursor: hand;
font-family: Helvetica;
font-size: 16px;
}
.highlight
{
margin-top: 5px;
width: 400px;
border: 2px outset #DDDDDD;
background-color: #A7DA8D;
cursor: hand;
font-family: Helvetica;
font-size: 18px;
}
</style>
<script>
function mouseovers () {
if (document.getElementsByTagName)
var x = document.getElementsByTagName('DIV');
else if (document.all)
var x = document.all.tags('DIV');
else return;
for (var i=0;i<x.length;i++) {
x[i].onclick = function () { alert(x[i].id); }
x[i].onmouseover = function () { this.className='highlight'; }
x[i].onmouseout = function () { this.className='default'; }
}
}
</script>
</head>
<body onload="mouseovers();">
<div class="default" id="1">Test number one</div>
<div class="default" id="1">Test number two</div>
<div class="default" id="2">Test number three</div>
<div class="default" id="3">Test number four</div>
<div class="default" id="4">Test number five</div>
</body>
</html>
When I click on any of the divs, whose id's range between 1-4, I should get an alert box indicating the id of the div I clicked on. Instead I get the error that x[...].id is null or not an object. Any ideas?. Any ideas?
<html>
<head>
<title>A test</title>
<style>
.default
{
margin-top: 5px;
width: 400px;
border: 2px outset #DDDDDD;
background-color: #E2FFA2;
cursor: hand;
font-family: Helvetica;
font-size: 16px;
}
.highlight
{
margin-top: 5px;
width: 400px;
border: 2px outset #DDDDDD;
background-color: #A7DA8D;
cursor: hand;
font-family: Helvetica;
font-size: 18px;
}
</style>
<script>
function mouseovers () {
if (document.getElementsByTagName)
var x = document.getElementsByTagName('DIV');
else if (document.all)
var x = document.all.tags('DIV');
else return;
for (var i=0;i<x.length;i++) {
x[i].onclick = function () { alert(x[i].id); }
x[i].onmouseover = function () { this.className='highlight'; }
x[i].onmouseout = function () { this.className='default'; }
}
}
</script>
</head>
<body onload="mouseovers();">
<div class="default" id="1">Test number one</div>
<div class="default" id="1">Test number two</div>
<div class="default" id="2">Test number three</div>
<div class="default" id="3">Test number four</div>
<div class="default" id="4">Test number five</div>
</body>
</html>