Использование javascript для добавления изображения в список, а затем удаление этого элемента списка при нажатии на изображение - PullRequest
Новая
       7

Использование javascript для добавления изображения в список, а затем удаление этого элемента списка при нажатии на изображение

0 голосов
/ 28 февраля 2020

Во-первых, я знаю, что могу сделать намного проще, создав ul в HTML. Я не должен этого делать.

Мой HTML: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body id="body">
    <form  id="form" >
      <input id="userInput" placeholder="Enter your list item here">
      <button type="button"  onclick="inputFunction()">Add</button>
    </form>
    <script src="A4.js"></script>
  </body>
</html>

Мой Javascript пока: 

// Creating Array
var listData = ["Crab","Lobster","Scallops"];
// Creating initial List
function listFunction(){
  var ul = document.createElement("ul");
  ul.id = 'ulId';

  document.getElementById('body').appendChild(ul);
  listData.forEach(liFunction);

  function liFunction(element){
    var li = document.createElement('li');
    ul.appendChild(li);
    li.innerHTML+=element;
  }
}
listFunction();

// Adding user input to the list
function inputFunction() {
  var input = document.getElementById("userInput").value;
  listData.push(input);
  var newLi = document.createElement("li");
  document.getElementById('ulId').appendChild(newLi);
  newLi.innerHTML=input;
}



var liImg = document.getElementsByTagName('li');
for (var i = 0; i < liImg.length; i++) {
  liImg[i].addEventListener('mouseover', handlerFunction, false);
}


function handlerFunction(e) {
  var img = document.createElement("img");
  img.setAttribute("src","https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
  img.setAttribute("height","10");
  img.setAttribute("width", "10");
  document.getElementsByTagName('li').innerHTML += "img";
}

Так что же я? Я должен сначала создать список, используя массив listData, и отобразить его на странице. Затем я беру пользовательский ввод и добавляю его в список. Эта часть работает нормально

Часть, на которой я застрял, должна создавать / отображать изображение рядом с каждым элементом списка при наведении курсора мыши. Затем необходимо удалить указанный элемент списка c, если на изображении щелкнуть мышью. Я создал eventListener, но, похоже, часть img не работает.

Ответы [ 2 ]

0 голосов
/ 28 февраля 2020

Проблема в том, что вы добавляете изображение к элементу li.

Решение: 

e.target.appendChild(img);


// Creating Array
var listData = ["Crab", "Lobster", "Scallops"];
// Creating initial List
function listFunction() {
  var ul = document.createElement("ul");
  ul.id = 'ulId';

  document.getElementById('body').appendChild(ul);
  listData.forEach(liFunction);

  function liFunction(element) {
    var li = document.createElement('li');
    ul.appendChild(li);
    li.innerHTML += element;
  }
}
listFunction();

// Adding user input to the list
function inputFunction() {
  var input = document.getElementById("userInput").value;
  listData.push(input);
  var newLi = document.createElement("li");
  document.getElementById('ulId').appendChild(newLi);
  newLi.innerHTML = input;
}



var liImg = document.getElementsByTagName('li');
for (var i = 0; i < liImg.length; i++) {
  liImg[i].addEventListener('mouseover', handlerFunction);
}


function handlerFunction(e) {
  var img = document.createElement("img");
  img.setAttribute("src", "https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
  img.setAttribute("height", "10");
  img.setAttribute("width", "10");
  e.target.appendChild(img);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body id="body">
  <form id="form">
    <input id="userInput" placeholder="Enter your list item here">
    <button type="button" onclick="inputFunction()">Add</button>
  </form>
  <script src="A4.js"></script>
</body>

</html>

Надеюсь, это поможет!

0 голосов
/ 28 февраля 2020

img не строка, это переменная, поэтому удалите из нее окружающие двойные кавычки. Поскольку img является элементом узла, вместо innerHTML следует использовать appendChild(). Вы также должны использовать e.target для ссылки на указанный элемент c li:

Изменить: 

document.getElementsByTagName('li').innerHTML += "img";

На 

e.target.appendChild(img);

Я предложу вам используйте mouseenter вместо mousemove. Я думаю, что вам также нужно прикрепить событие mouseleave. Вы также должны прикрепить события к вновь созданным li элементам.

Попробуйте выполнить следующее: 

// Creating Array
var listData = ["Crab","Lobster","Scallops"];
// Creating initial List
function listFunction(){
  var ul = document.createElement("ul");
  ul.id = 'ulId';

  document.getElementById('body').appendChild(ul);
  listData.forEach(liFunction);

  function liFunction(element){
    var li = document.createElement('li');
    ul.appendChild(li);
    li.innerHTML+=element;
  }
}
listFunction();

// Adding user input to the list
function inputFunction() {
  var input = document.getElementById("userInput").value;
  listData.push(input);
  var newLi = document.createElement("li");
  newLi.addEventListener('mouseenter', handlerFunction, false);
  newLi.addEventListener('mouseleave', removeImage, false);
  document.getElementById('ulId').appendChild(newLi);
  newLi.insertAdjacentHTML('beforeend', input);
}



var liImg = document.getElementsByTagName('li');
for (let i = 0; i < liImg.length; i++) {
  liImg[i].addEventListener('mouseenter', handlerFunction, false);
  liImg[i].addEventListener('mouseleave', removeImage, false);
}


function handlerFunction(e) {
  var img = document.createElement("img");
  img.setAttribute("src","https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
  img.setAttribute("height","30");
  img.setAttribute("width", "30");
  img.addEventListener('click', function(){
    this.closest('li').remove();
  });
  e.target.appendChild(img);
}
function removeImage(e){
  e.target.querySelector('img').remove();
}
<body id="body">
  <form  id="form" >
    <input id="userInput" placeholder="Enter your list item here">
    <button type="button"  onclick="inputFunction()">Add</button>
  </form>
  <script src="A4.js"></script>
</body>
...