Element in array updates automatically

Question

I have a normal array and each element of this array is one HTML element. when I get HTML element to the array and later change that element(change its class or ....) my array also updates automatically but I don't want this and I want my array to hold old state of html element.

let btn = document.querySelector('.btn') ;
let arr = [] ;
btn.addEventListener('click',function(e){
    arr.push(this) ; //now 'arr' is [button.btn]
    console.log(arr) ; //[button.btn]
    this.classList.add('something') ; //this line will also update 'arr' too but I dont want this and I 
    //want arr still holds [button.btn]
    console.log(arr) ; //[button.btn.something]
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <button class="btn">click me</button>
</body>
</html>

Your item in the array is the same as before which is the button element. You add a class to the button then the element in your array will have it too because it is the SAME element. The console log only shows you what the element is, even if it shows it without the something, it still has the something class because you added it. You would have to create another copy of the button if you don't want this to occur — Huangism
– Huangism, Commented Aug 15, 2019 at 19:01

Don · Accepted Answer · 2019-08-15 19:08:03Z

What's happening is when you append this to your array, you're saving a reference to the current element, not a copy of the current element. So when the element changes, all references to that element are going to reflect those changes.

To get around this you should create a copy before you append it to the array that way you're creating a "snapshot" of the state of the element and saving that, so that any future changes to the element aren't reflected by the copies of the element in the list.

The important change is the line: arr.push(this.cloneNode(true)); rather than just appending this I'm creating a copy by calling this.cloneNode(true).

let btn = document.querySelector('.btn') ;
let arr = [] ;
btn.addEventListener('click',function(e){
    arr.push(this.cloneNode(true)) ; //now 'arr' is [button.btn]
    console.log(arr) ; //[button.btn]
    this.classList.add('something') ; //this line will also update 'arr' too but I dont want this and I 
    //want arr still holds [button.btn]
    console.log(arr) ; //[button.btn.something]
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <button class="btn">click me</button>
</body>
</html>

Collectives™ on Stack Overflow

Element in array updates automatically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related