Can't copy array of buttons in a different array in Javascript

Question

I cant understand why this does not store a copy of the previous array.

code

console.log(buttons);

var copybtns = [];
for (let i = 0; i < buttons.length; i++) {
copybtns = buttons[i];
    
}

console.log(copybtns);

and I get this in my console

My dull html code

<body>
    <div class="container">
        <form action="">
            <select name="changecolor" id="background" onchange="changeToRed(this)">
                <option value="Random">Random</option>
                <option value="Red"">Red</option>
                <option value="Blue">Blue</option>
                <option value="Black">Black</option>
                <option value="Reset">Reset</option>
            </select>
        </form>
        <button>0</button>
        <button class="btn btn-primary">1 </button>
        <button class="btn btn-danger">2</button>
        <button class="btn btn-dark">3</button>
        <button class="btn btn-warning">4</button>
    </div>
</body>

I was watching a tutoprial but wrote the same code but i don't know why its not working

I want a result like this

try `copybtns.push(buttons[i]);` - If it does not work please add your HTML to debug further — Always Helping, Aug 01 '20 at 08:12
Be aware that this does not copy the actual *buttons*. Use [cloneNode](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) if you want to actually copy those as well. — Lain, Aug 01 '20 at 08:13
`copybtns[i] = buttons[i];` inside the for loop would also fix it. — Jeffery Tang, Aug 01 '20 at 08:19
I ran your code with the HTML you gave us but `copybtns` returns the last button instead of `[]`... — Jeffery Tang, Aug 01 '20 at 08:21
console.log(copybtns); should be same as console.log(buttons); — Justin, Aug 01 '20 at 08:29
@Justin See the answer below. It working and showing `console.log(copybtns); should be same as console.log(buttons);` — Always Helping, Aug 01 '20 at 08:33
You got a lot of valid possibilities/answers for your problem. What's not working for you with these suggestions? Are you looking to also log a `HTMLCollection` for the copy? — Getter Jetter, Aug 01 '20 at 08:36
Looks like you got your answer even if it's not returning a `HTMLCollection`. Here are some links about the differences: [link1](https://stackoverflow.com/questions/15763358/difference-between-htmlcollection-nodelists-and-arrays-of-objects), [link2](https://stackoverflow.com/questions/12770147/is-htmlcollection-an-array). Also I just saw your image in the question. The result you're looking for also isn't a `HTMLCollection`. — Getter Jetter, Aug 01 '20 at 08:48
In turn it's still not clear to me what you're looking for. Do you want just an `Array` containing the button elements references or a `HTMLCollection`? — Getter Jetter, Aug 01 '20 at 08:56

score 1 · Accepted Answer · answered Aug 01 '20 at 08:28

1

You can simply use forEach function using querySelectorAll method to store the button in your empty array copybtns

Fiddle Demo: https://jsfiddle.net/efxwbtyu/

//get all buttons
let buttons = document.querySelectorAll('button')

//Original buttons
console.log(buttons)

//store
var copybtns = [];

//foreach
buttons.forEach((data) => copybtns.push(data))

//log the array data
console.log(copybtns);

<button>0</button>
<button class="btn btn-primary">1 </button>
<button class="btn btn-danger">2</button>
<button class="btn btn-dark">3</button>
<button class="btn btn-warning">4</button>

answered Aug 01 '20 at 08:28

Always Helping

14,316
4
13
29

but this is the result I get`NodeList [] length: 0 __proto__: NodeList main.js:14 [] length: 0` – Justin Aug 01 '20 at 08:42
@Justin It should work fine. Just like it working in my answer above. I am not sure what is this result ? – Always Helping Aug 01 '20 at 09:18
@Justin I saw your image above regarding expected results. So you want it like that. I have edited my answer. My `console.log(copybtns)` above in the answer is showing exactly the results you wanted in the picture in your question. Also the js fiddle demo is showing the same results as you wanted in the console. – Always Helping Aug 01 '20 at 09:23
Okay I will just make a new project and try again. Thank you so much for the help] – Justin Aug 01 '20 at 14:01

Can't copy array of buttons in a different array in Javascript

1 Answers1