It doesn't work for me. The most common errors are getAttribute is not a function / Node was not found , among others. I can't understand how to use it because sometimes it works as I want, but other times it doesn't. What am I doing wrong? What do I do so that all the boxes pass to the other div without an error and without using id.
function mover(){
var cajas = document.querySelector(".box > div");
// Al añadir el [0] al final del query se va añadiendo de a una caja por click, es como si simplemente quitara el All, lo que necesito es que añadan todas.
document.getElementById("color").appendChild(cajas);
}
.box{
background-color: #f1f1f1;
display: flex;
justify-content: center;
}
.box > div{
width: 50px;
height: 50px;
margin: 10px;
background-color: #ddd;
border-radius: 50%;
}
.color{
background-color: #f1f1f1;
display: flex;
justify-content: center;
}
.color > div{
width: 50px;
height: 50px;
margin: 10px;
background-color: #ff0;
border-radius: 50%;
}
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="color" class="color"></div>
<button onclick="mover()">Mover</button>
You need a cycle, you can use
querySelectorAll
, but this returns you aArray
and to pass all the data fromarray
to the otherdiv
, it will be necessary to iterate them, or make an example cyclefor
or.forEach
.Once you've passed ALL
divs
, you should validate that you haven't already found another onediv
and finish before trying to pass an object that doesn't exist or is null.