Функция следующего изображения не отображается при вызове при отпускании

Question 1

У меня есть три элемента div с классом .box и идентификаторами 10, 11, 12. У меня также есть .box002 с идентификатором 2.

При перетаскивании .box002 на любой из элементов .box элементы background-color и p удаляются. При перетаскивании я вызвал функцию nextslide() для отображения следующего слайда, если перетаскивание прошло успешно, но это не сработало.

Я хочу отобразить следующее изображение для перетаскивания, если перетаскивание прошло успешно.

Как я могу этого добиться?

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

var x = document.get

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  alert(data);
  var el = document.getElementById(data);

  el.parentNode.removeChild(el); // deleting drag item

  ev.target.style.backgroundColor = 'initial'; //[value indicate which box elemenet] bgcoclor none

  var pParagraph = ev.target.firstElementChild;
  console.log(pParagraph);
  ev.target.removeChild(pParagraph);

  nextslide();
}

var images = new Array();
images[0] = "https://picsum.photos/200/300/?random";
images[1] = "https://picsum.photos/200/300/?random";
images[2] = "https://picsum.photos/200/300/?random";
var currentpic = 0;
var lastpic = images.length - 1;

function nextslide() {
  if (currentpic == lastpic) {
    currentpic = 0;
    document.getElementById('slide').src = images[currentpic];
  } else {
    currentpic++;
    document.getElementById('slide').src = images[currentpic];
  }
}

.box {
  background-color: coral;
  width: 50%;
  height: 150px;
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border-color: #b3b300;
  margin: -2px;
  border-radius: 10%;
  background-color: #42e0fd;
}

.box002 {
  float: left;
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 30%;
  padding-top: 2%;
  background-color: #333 2px;
  margin-bottom: 40%;
}

.text {
  padding: 20px;
  margin: 7 px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
}

#container {
  white-space: nowrap;
  text-align: center;
  margin-left: 20%;
  margin-right: 30%;
}

p {
  font-size: 50px;
  color: #000000;
  text-align: center;
}

<div id="container">
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
    <p name="values">12</p>
  </div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
    <p name="values">21</p>
  </div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
    <p name="values">17</p>
  </div>
</div>

<div class="box002" draggable="true" ondragstart="drag(event)" id="2" onclick="nextslide()">
  <img src="https://picsum.photos/200/300/?random" draggable="true" id="slide" style="width:100px; height:100px; border-radius: 50%;" border="rounded" />
</div>

javascript jquery html

0

dev maddy 11 Сен 2018 в 09:46

Answer

Спасибо за интересную и очень забавную задачу. Как правильно заметил Марио Васкес, вы удаляли изображение, а затем пытались ссылаться на него позже. Я смотрел на эту проблему с тех пор, как вы ее разместили, и не понял, что именно здесь что-то пошло не так. Однако после этого произошла еще одна ошибка с удалением вашего текста. То, что вы пытались удалить, firstElementChild на самом деле не узел, это элемент. Поэтому, когда вы вызывали команду removeChild, она не могла работать, потому что эта команда удаляет только узлы.

Чтобы исправить это, просто замените firstElementChild на firstChild. Это простое решение. Затем удалите el.parentNode.removeChild(el), чтобы решить проблему удаления изображения, прежде чем вы фактически вызовете его в своем коде.

Надеюсь это поможет. От вашего дружелюбного соседа, Интернет-парень

0

The Internet Guy 11 Сен 2018 в 10:12

Question 2

Спасибо за интересную и очень забавную задачу. Как правильно заметил Марио Васкес, вы удаляли изображение, а затем пытались ссылаться на него позже. Я смотрел на эту проблему с тех пор, как вы ее разместили, и не понял, что именно здесь что-то пошло не так. Однако после этого произошла еще одна ошибка с удалением вашего текста. То, что вы пытались удалить, firstElementChild на самом деле не узел, это элемент. Поэтому, когда вы вызывали команду removeChild, она не могла работать, потому что эта команда удаляет только узлы.

Чтобы исправить это, просто замените firstElementChild на firstChild. Это простое решение. Затем удалите el.parentNode.removeChild(el), чтобы решить проблему удаления изображения, прежде чем вы фактически вызовете его в своем коде.

Надеюсь это поможет. От вашего дружелюбного соседа, Интернет-парень

0

The Internet Guy 11 Сен 2018 в 10:12

Функция следующего изображения не отображается при вызове при отпускании

1 ответ

Похожие вопросы

Новые вопросы

javascript