Elements in an Object Array are always updated according to new target events

Question

Hello I am trying to make a simple project where the program tracks and records the details of the click events from the targets that fires the events in trackObject, and then stores it in the details array.

However, it keeps updating the previous trackObject with every new click that I make. For example, when I click Box 1, it stores the details of the events from Box 1 into details, but when I click Box 2, it stores also the details from Box 2, but also replaces the details of Box 1. In the end, details of Box 2 are stored twice in details array.

May I please know what my mistake is here?

Thank you!

<html>

<body>
    <div class="container">
        <div id="box1" class="box">Box 1</div> <br>
        <div id="box2" class="box">Box 2</div> <br>
        <div id="box3" class="box">Box 3</div> <br>
        <div id="box4" class="box">Box 4</div> <br>
    </div>

    <script>
        let container = document.querySelector(".container");
        let details = [];
        let trackObject = {
            textContent: null,
            id: null,
            tagName: null,
            className: null
        }

        container.addEventListener("click", function (e) {
            trackObject.textContent = e.target.textContent;
            trackObject.id = e.target.id;
            trackObject.tagName = e.target.tagName;
            trackObject.className = e.target.className;

            details.push(trackObject);
            console.log(details);
        })

    </script>
</body>

</html>

let container = document.querySelector(".container");
let details = [];
let trackObject = {
  textContent: null,
  id: null,
  tagName: null,
  className: null
}

container.addEventListener("click", function(e) {
  trackObject.textContent = e.target.textContent;
  trackObject.id = e.target.id;
  trackObject.tagName = e.target.tagName;
  trackObject.className = e.target.className;

  details.push(trackObject);
  console.log(details);
})

<div class="container">
  <div id="box1" class="box">Box 1</div> <br>
  <div id="box2" class="box">Box 2</div> <br>
  <div id="box3" class="box">Box 3</div> <br>
  <div id="box4" class="box">Box 4</div> <br>
</div>

You're only defining the object once and pushing it into the array on every click. Move the object creation code within the listener callback so a new object is created on each click. — Andy, Aug 22 '22 at 18:27

score 0 · Answer 1 · answered Aug 22 '22 at 19:06

There are two ways to solve this problem. However, there is another unrelated problem that you might experience.

To solve the old data showing up problem, you can move your let trackObject declaration into the click handler, or set a variable within the click handler to the trackobject and just use that to overwrite each time.

The second problem that you might experience is that by adding the click handler to the container of the divs, you can get clicks on the spaces between the divs. To solve this, I'm looking for the class box on the target of the click.

let container = document.querySelector(".container");
        let details = [];
        let trackObject = {
            textContent: null,
            id: null,
            tagName: null,
            className: null
        }

        container.addEventListener("click", function (e) {
           if(e.target.className.includes("box")){
            let obj = trackObject;
            obj.textContent = e.target.textContent;
            obj.id = e.target.id;
            obj.tagName = e.target.tagName;
            obj.className = e.target.className;

            details.push(obj);
            console.log(details);
            }
        })

<div class="container">
  <div id="box1" class="box">Box 1</div> <br>
  <div id="box2" class="box">Box 2</div> <br>
  <div id="box3" class="box">Box 3</div> <br>
  <div id="box4" class="box">Box 4</div> <br>
</div>

Elements in an Object Array are always updated according to new target events

1 Answers1