Query селектор all я не функционирует

Оно я не функционирует самые общие ошибки - getAttribute is not в function / Node was not found между другими, мне не удается понять хорошо, какое Ваше использование, так как оно иногда я функционирует, как я хочу, но другие разы - нет: что я врежу? который я делаю для того, чтобы все ящики произошли с другим div, без того, чтобы ошибки и не используя, пойдите.

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>
0
задан 10.11.2019, 04:26
1 ответ
  1. Ты Нуждаешься в цикле, можешь использовать querySelectorAll, но этот возвращает тебе один Array и чтобы перемещать другой все данные о array div, будет необходимо повторять их, или делать цикл пример for или .forEach.

  2. Как только уже ты перемещаешь ВСЕ divs, deberГ-схвати санкционировать, что уже ты не нашел другими div, и заканчиваться перед тем, как пробовать перемещать объект, который не существует или недействительный.

function mover(){
  var caja = 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.
  if(caja){//Con esto valido si tiene valor y evito algun error al intentar asiganar un objeto que no tiene valor
    document.getElementById("color").appendChild(caja);
  }
}

function moverTodo(){
  var cajas = document.querySelectorAll(".box > div");
  //console.log(cajas);
  //Es necesario iterar el Array de datos con .forEach recorres todos los divs y haces lo que quieras con ellos dentro del ciclo, para usar forEach cajas no debe ser nulo
  if(cajas){//Con esto valido si tiene valor
    cajas.forEach(function(ele) {
      document.getElementById("color").append(ele);
    });
  }
}
.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>
<button onclick="moverTodo()">Mover Todo</button>
1
ответ дан 01.12.2019, 12:10