i want to get box index number using Javascript. like i have four box so i want each box text have this appropriate number.
<head>
<script type="text/javascript">
function () {
var Main= document.getElementById('container').getElementsByTagName('div');
for(i=0; i<Main.length;i++){
}
}
</script>
<style>
.box {
float:left;
margin-left:20px;
position:relative
}
.width {
position:absolute;
left:0;
top:0;
color:#FFF;
font-size:20px;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<img src="img/sample1.jpg" height="200" width="300" />
</div>
<div class="box">
<img src="img/sample2.jpg" height="200" width="350" />
</div>
<div class="box">
<img src="img/sample3.jpg" height="200" width="150" />
</div>
<div class="box">
<img src="img/sample4.jpg" height="200" width="100" />
</div>
</div>
</body>
Replace all your JS with this below and place the script tag as the last tag in your body tag to assure the DOM is ready when this is called. You could also call this function from the
onloadevent.http://jsfiddle.net/mmjW9/