Home Why am I only targeting panel4 (not the clicked panel) when adding event listeners via a getElementsByClassName array

Questions

Why am I only targeting panel4 (not the clicked panel) when adding event listeners via a getElementsByClassName array

byMR

November 15, 2022

The expected result is that when you click on each panel, the panel you clicked on moves, then moves back when you click it again.

The result with my current code is that no matter which panel you click it is always panel4 that toggles.

The reason these need to be added dynamically to each is because this list of panels will be auto populated and have the target ids dynamically generated too.

The Code….

var plbelements = document.getElementsByClassName("panel");
for (var l = 0; l < plbelements.length; l++) {
  targetPanel = document.getElementById(plbelements[l].id);
  actionSwipeAmount = "160px";
  console.log("Target Panel before event listener = " + targetPanel.id);
  targetPanel.addEventListener("click", (e) => {
    left = window.getComputedStyle(targetPanel).getPropertyValue("left");
    console.log(targetPanel.id);
    if (left != actionSwipeAmount) {
      targetPanel.style.left = actionSwipeAmount;
    } else {
      targetPanel.style.left = "0px";
    }
  });
}

body {
  margin: 0;
}

.panelsContainer {
  display: block;
  max-width: 360px;
  width: 100%;
  min-height: 50px;
  border: 1px solid black;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.underPanel {
  display: block;
  width: 360px;
  min-height: 50px;
  border: 1px solid black;
  background-color: #6c6c6c;
  color: white;
  padding: 5px;
  box-sizing: border-box;
  position: relative;
  color: white;
}
.panel {
  display: block;
  width: 360px;
  min-height: 50px;
  border: 1px solid black;
  background-color: #141414;
  color: white;
  padding: 5px;
  box-sizing: border-box;
  position: absolute;
  right: 0px;
  top: 0px;
}

.underPanel:nth-child(even) > .panel {
  background-color: #303030;
}

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

<div class="panelsContainer">
  <div class="underPanel">Hello
    <div id="panel1" class="panel">1</div>
  </div>
  <div class="underPanel">Hello
    <div id="panel2" class="panel">2</div>
  </div>
  <div class="underPanel">Hello
    <div id="panel3" class="panel">3</div>
  </div>
  <div class="underPanel">Hello
    <div id="panel4" class="panel">4</div>
  </div>
</div>

>Solution :

For solving your problem, you need to redefine the target variable in for loop using const like this:

    const targetPanel = document.getElementById(plbelements[l].id);

And you’d better use const and let instead of var. The entire JavaScript code is as follows:

    const plbelements = document.getElementsByClassName("panel");

    for (let l = 0; l < plbelements.length; l++) {
        const targetPanel = document.getElementById(plbelements[l].id);
        const actionSwipeAmount = "160px";
        console.log("Target Panel before event listener = " + targetPanel.id);

        targetPanel.addEventListener("click", (e) => {
            left = window.getComputedStyle(targetPanel).getPropertyValue("left");
            console.log(targetPanel.id);

            if (left != actionSwipeAmount) {
                targetPanel.style.left = actionSwipeAmount;
            } else {
                targetPanel.style.left = "0px";
            }
        });
    }