почему перемещение элементов с помощью appendChild не будет работать на JS

#javascript #jquery

#javascript #jquery ( jquery )

Вопрос:

Я пытаюсь переместить некоторые изображения в режиме просмотра на мобильном устройстве и удалить их с предыдущих мест. Я пробовал этот код, но он заканчивается следующей ошибкой: TypeError: picPos равен null? всякий раз, когда я консольно регистрирую pic или picPos, журнал выглядит именно так, как и должно быть. может ли кто-нибудь понять почему?

 btn.addEventListener("click",function(){
  for(var i = 0; i<=3; i  ){
    let picPos = document.getElementById("container" (i 1));
    let pic = document.getElementById("box" (i 1));
    picPos.appendChild(pic);
  }
  
  })

 #container2>div{
  height:50px;
  width:50px;
  background-color:red;
  margin:5px;
}

 <div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>

<div id="container2">
  <div id="box1">1</div>
  <div id="box2">2</div>
  <div id="box3">3</div>
</div>
<button id="btn">Click</button>

Развернуть фрагмент

1. Всякий раз, когда я регистрирую его в консоли, журнал показывает все так, как должно быть.

2. Для контейнера вы используете class в div, но используете getElementById

3. Не добавляйте комментарий, объясняющий ваш вопрос. Добавьте информацию к самому вопросу

4. кроме того, ваше условие продолжения цикла должно быть i < 3 , а не i <= 3 . Даже если вы исправите свой HTML для использования идентификаторов, это будет искать элемент с идентификатором container4 , которого у вас нет

5. @JuanMendes Я отменил вашу правку, поскольку, похоже, она пыталась изменить фундаментальный вопрос здесь.

Ответ №1:

Вы должны использовать атрибуты id в своем HTML, если используете getElementById .

Я также изменил ваш цикл на start at 1 , чтобы вам не приходилось добавлять 1 каждый раз в свой цикл. Это зависит от остальной части вашего приложения, если это хорошая идея или нет.

Поскольку я не уверен, что должно произойти в вашем коде, я оставляю это на ваше усмотрение.

 btn.addEventListener("click",function(){
  for(var i = 1; i<=3; i  ){
    let picPos = document.getElementById("container" i);
    let pic = document.getElementById("box" i);
    picPos.appendChild(pic);
  }
})

 #container4>div{
  height:50px;
  width:50px;
  background-color:red;
  margin:5px;
}

 <div id="container1" class="container1"></div>
<div id="container2" class="container2"></div>
<div id="container3" class="container3"></div>

<div id="container4">
  <div id="box1">1</div>
  <div id="box2">2</div>
  <div id="box3">3</div>
</div>
<button id="btn">Click</button>

Развернуть фрагмент

1. В вашем примере есть два элемента с идентификатором container2

2. Кроме того, что должно произойти, когда вы нажмете кнопку?

3. Я вижу, что один красный прямоугольник переходит в один из divs, но это должны быть все три из них?

4. О, они все перемещаются, это просто CSS, который не исправлен

5. проблема была каким-то образом связана с (i 1), и теперь она решена, спасибо 🙂