How to get box index number using only javascript

Question

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>

Answer 1

window.onload=function() {
   var Main= document.getElementById('container').getElementsByTagName('div');

  for(var i=0; i<Main.length;i++){
    Main[i].innerHTML+= '<span class="title">box '+(i+1)+'</span>';
  }
}

DEMO

Answer 2

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 onload event.

(function(){
    var Main= document.getElementById('container').getElementsByTagName('div');
    for(var i=0; i<Main.length;i++){
      Main[i].innerHTML += "box"+i;
    }
})();

http://jsfiddle.net/mmjW9/

How to get box index number using only javascript

Question

2 answers

solution1
2 2012-07-14 13:02:17

solution2
1 ACCPTED 2012-07-14 13:04:24

How to get box index number using only javascript

Question

2 answers

solution1 2 2012-07-14 13:02:17

solution2 1 ACCPTED 2012-07-14 13:04:24

solution1
2 2012-07-14 13:02:17

solution2
1 ACCPTED 2012-07-14 13:04:24