CODEWITHSUNDEEP
javascripthtmleventsonclick
namco
namco

Reputation: 6338

JavaScript alert does not work correctly with div tag

There are 16 boxes in html. 

<div id="box-container">
    <div class="box" data-coord="0:0" style="clear: left"></div> <div class="box" data-coord="0:1"></div> <div class="box" data-coord="0:2"></div> <div class="box" data-coord="0:3"></div>
    <div class="box" data-coord="1:0" style="clear: left"></div> <div class="box" data-coord="1:1"></div> <div class="box" data-coord="1:2"></div> <div class="box" data-coord="1:3"></div>
    <div class="box" data-coord="2:0" style="clear: left"></div> <div class="box" data-coord="2:1"></div> <div class="box" data-coord="2:2"></div> <div class="box" data-coord="2:3"></div>
    <div class="box" data-coord="3:0" style="clear: left"></div> <div class="box" data-coord="3:1"></div> <div class="box" data-coord="3:2"></div> <div class="box" data-coord="3:3"></div>
</div>

I want to write js code that will do following:
When I click on any box, it will alert it's order number from 1 to 16.
There is my js code below: 

<script type="text/javascript">
    var boxArray = document.getElementsByClassName("box");
    for (var i = 0; i < boxArray.length; i++) {
        boxArray[i].onclick = function () {
            var say = function (i) {
                alert(i);
            };
            say(i);
        }
    }
</script>

But every time it alerts 16.
What is the problem?
Could you help me, please?

Upvotes: 1

Views: 399

Answers (4)

Asons
Asons

Reputation: 87201

You can use addEventListener with a local declared variable, like this

var boxArray = document.getElementsByClassName("box");
for (var i = 0; i < boxArray.length; i++) {
  boxArray[i].addEventListener('click', (function(e) {
    var num = i;
    return function() {
      alert(num);
    }
  })());
}
<div id="box-container">
  <div class="box" data-coord="0:0" style="clear: left">1</div>
  <div class="box" data-coord="0:1">2</div>
  <div class="box" data-coord="0:2">3</div>
  <div class="box" data-coord="0:3">4</div>
  <div class="box" data-coord="1:0" style="clear: left">5</div>
  <div class="box" data-coord="1:1">6</div>
  <div class="box" data-coord="1:2">7</div>
  <div class="box" data-coord="1:3">8</div>
</div>

Upvotes: 1

Brandon
Brandon

Reputation: 3266

You can do this so much simpler if you use jQuery's .index()

It's as simple as doing this:

$(".box").click(function(){

  var i = $(this).index();     
  alert(i);

});

DEMO: http://jsbin.com/zoxirafufo/edit?html,js,console,output

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

Using the classical IIFE: Immediately Invoked Function Expression you can write:

var boxArray = document.getElementsByClassName("box");
for (var i = 0; i < boxArray.length; i++) {
  boxArray[i].onclick = (function (i) {
    return function (e) {
      var say = function (i) {
        alert(i);
      };
      say(i);
    };
  })(i);
}
<div id="box-container">
    <div class="box" data-coord="0:0" style="clear: left">1</div> <div class="box" data-coord="0:1">2</div> <div class="box" data-coord="0:2">3</div> <div class="box" data-coord="0:3">4</div>
    <div class="box" data-coord="1:0" style="clear: left">5</div> <div class="box" data-coord="1:1">6</div> <div class="box" data-coord="1:2">7</div> <div class="box" data-coord="1:3">8</div>
    <div class="box" data-coord="2:0" style="clear: left">9</div> <div class="box" data-coord="2:1">10</div> <div class="box" data-coord="2:2">11</div> <div class="box" data-coord="2:3">12</div>
    <div class="box" data-coord="3:0" style="clear: left">13</div> <div class="box" data-coord="3:1">14</div> <div class="box" data-coord="3:2">15</div> <div class="box" data-coord="3:3">16</div>
</div>

Upvotes: 4

Mogzol
Mogzol

Reputation: 1405

This has to do with javascript's scope. i is outside the scope of the for loop because you used var, so when you do alert(i), it takes the value that i is left with after the loop (since the loop has already run).

Change your for loop from

for (var i = 0; i < boxArray.length; i++)

to

for (let i = 0; i < boxArray.length; i++)

And it should fix your problem.

Upvotes: 3

Related Questions