0

I have multiple buttons with the ids "especifica-i-pj", where i goes from 1 to 4 and j goes from 1 to 3. The idea is to assign an onclick event to each one of them, without having to declare 12 functions. I thought this would solve my problem:

for ( i = 1; i <= 4; i++ ) {
    for ( j = 1; j <= 3; j++ ) {
        dom_id = "especifica-"+i.toString()+"-p"+j.toString();
        document.getElementById(dom_id).onclick = function() {
            console.log("you clicked ",dom_id)
            ponder[i-1] = 0.1 + 0.05*(j-1);
            console.log("ponder:",i,ponder[i-1])
            $("#"+dom_id).addClass("active");
            for ( k = 1; k <= 3 && k != j; k++ )
                $("#especifica-"+i.toString()+"-p"+k.toString()).removeClass("active");
        }
    }
}

However each time I click any of the buttons, my console outputs that I clicked especifica-4-p3, the last one, and outputs ponder: 5 0.25, when i==5 should not be possible, as the outer for gets to i==4.

What can I do to make this work? I have been searching online but I have not found anything about this, or even declaring functions inside for loops. Thanks.

Improve this question
2
  • No, i gets to 5, and then exits the for loop. It is still 5 at the time of the click event. You likely want to store the current value of i into a different non-global variable so that you can reference it inside your function. Commented Apr 16, 2020 at 11:23
  • What does your HTML look like? I'd be helpful to see that as well Commented Apr 16, 2020 at 11:24

3 Answers 3

Reset to default
2

The easy way would be to do one of the following:

  1. Store the values of i and j on the DOM element.
  2. Parse the clicked id to get the values of i and j.
  3. Assign the values of i and j to non-global variables so that you can retrieve them later.

Method 1:

for(i=1; i<=4; i++) {
  for(j=1; j<=3; j++) {
    dom_id = "especifica-"+i.toString()+"-p"+j.toString();
    element = document.getElementById(dom_id);
    element.i = i;
    element.j = j;
    element.onclick = function() {
      console.log("you clicked ",dom_id)
      ponder[this.i-1] = 0.1 + 0.05*(this.j-1);
      console.log("ponder:",this.i,ponder[this.i-1])
      $("#"+dom_id).addClass("active");
      for(k=1; k<=3 && k!=j; k++)
        $("#especifica-"+this.i.toString()+"-p"+k.toString()).removeClass("active");
    }
  }
}

Method 2:

for(i=1; i<=4; i++) {
  for(j=1; j<=3; j++) {
    dom_id = "especifica-"+i.toString()+"-p"+j.toString();
    document.getElementById(dom_id).onclick = function() {
      i = dom_id.substring(11,12);
      j = dom_id.substring(14,15);
      console.log("you clicked ",dom_id)
      ponder[i-1] = 0.1 + 0.05*(j-1);
      console.log("ponder:",i,ponder[i-1])
      $("#"+dom_id).addClass("active");
      for(k=1; k<=3 && k!=j; k++)
        $("#especifica-"+i.toString()+"-p"+k.toString()).removeClass("active");
    }
  }
}

Method 3:

for(i=1; i<=4; i++) {
  let i1 = i;
  for(j=1; j<=3; j++) {
    let j1 = j;
    dom_id = "especifica-"+i.toString()+"-p"+j.toString();
    document.getElementById(dom_id).onclick = function() {
      console.log("you clicked ",dom_id)
      ponder[i1-1] = 0.1 + 0.05*(j1-1);
      console.log("ponder:",i,ponder[i1-1])
      $("#"+dom_id).addClass("active");
      for(k=1; k<=3 && k!=j; k++)
        $("#especifica-"+i1.toString()+"-p"+k.toString()).removeClass("active");
    }
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

How do I do 1)?
Could you show me howto? I've been searching and found nothing. Thanks in advance!
You can also make a local function and call it, which would be yet another way. I suspect that you could also use the position of the elements to determine i and j and use a single event handler, but we'd need to see the html to do so.
1

The best way is to capture on click for the first level parent which is the parent for all the buttons,

Only for that you create on click,

inside the event function detect event.target which will tell from which button the click is happening

function buttonClick(event) {
    alert(event.target.getAttribute("id"));
}
<div id="parent" onclick="buttonClick(event)">
   <button id="especifica-1-p1">b11</button>
   <button id="especifica-1-p2">b12</button>
   <button id="especifica-1-p3">b13</button>
   <button id="especifica-2-p1">b21</button>
   <button id="especifica-2-p2">b22</button>
   <button id="especifica-2-p3">b23</button>
</div>

If you want to maintain the data 1,1 1,2 ... etc , you can do like this

In each button you can introduce dummy data attributes with your own name assumption

Example

<button id="especifica-1-p1" data-row="1" data-column="1">b11</button>
<button id="especifica-1-p2" data-row="1" data-column="2">b12</button>

Then you can use JavaScript

event.target.getAttribute("data-row");
event.target.getAttribute("data-column");
Improve this answer

1 Comment

Thanks! I will use this too! hehe :·3
1

Here's a fix by using data-* attributes:

for (var i = 1; i <= 2; i++) {
  for (var j = 1; j <= 3; j++) {
    var buttonId = "especifica-" + i + "-p" + j;
    var button = document.getElementById(buttonId);
    
    button.setAttribute("data-i", i);
    button.setAttribute("data-j", j);

    button.addEventListener("click", function(event) {
      console.log("i", event.target.getAttribute("data-i"));
      console.log("j", event.target.getAttribute("data-j"));
      console.log("button with id of", event.target.id, "was clicked!");
    });
  }
}
<div><button id="especifica-1-p1" type="button">especifica-1-p1</button></div>
<div><button id="especifica-1-p2" type="button">especifica-1-p2</button></div>
<div><button id="especifica-1-p3" type="button">especifica-1-p3</button></div>
<div><button id="especifica-2-p1" type="button">especifica-2-p1</button></div>
<div><button id="especifica-2-p2" type="button">especifica-2-p2</button></div>
<div><button id="especifica-2-p3" type="button">especifica-2-p3</button></div>

Learn more about data-* attributes here:

Alternatively, you could take advantage of the concept of closures, like in the following example:

for (var i = 1; i <= 2; i++) {
  for (var j = 1; j <= 3; j++) {
    var buttonId = "especifica-" + i + "-p" + j;
    var button = document.getElementById(buttonId);
    
    var createEventListener = function (iValue, jValue) {
      return function (event) {
        console.log("i:", iValue, "j:", jValue);
        console.log("button with id of", event.target.id, "was clicked!");
      }
    };
    button.addEventListener("click", createEventListener(i, j));
  }
}
<div><button id="especifica-1-p1" type="button">especifica-1-p1</button></div>
<div><button id="especifica-1-p2" type="button">especifica-1-p2</button></div>
<div><button id="especifica-1-p3" type="button">especifica-1-p3</button></div>
<div><button id="especifica-2-p1" type="button">especifica-2-p1</button></div>
<div><button id="especifica-2-p2" type="button">especifica-2-p2</button></div>
<div><button id="especifica-2-p3" type="button">especifica-2-p3</button></div>

Read more about closures here:

Also, use the element.addEventListener method instead of element.onclick. Have a look at here why it's better to use addEventListener('click', ...) instead of onclick:

Improve this answer

3 Comments

how can I use the i, j values inside the function without parsing the string?
@mianfg If you're talking about having access to i and j inside of the event handler, then they're both in the scope of that handler function, so you can just use them however you'd like. See my edit.
@goto1 Change your var i to let i and var j to let j to fix it so you can reference the current value of i and j inside the function.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.