Why am I only targeting panel4 (not the clicked panel) when adding event listeners via a getElements-CodePudding

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 >
  <div >Hello
    <div id="panel1" >1</div>
  </div>
  <div >Hello
    <div id="panel2" >2</div>
  </div>
  <div >Hello
    <div id="panel3" >3</div>
  </div>
  <div >Hello
    <div id="panel4" >4</div>
  </div>
</div>

CodePudding user response：

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";
            }
        });
    }