Как отобразить кнопку удаления из списка TODO - PullRequest
Новая
       49

Как отобразить кнопку удаления из списка TODO

0 голосов
/ 30 января 2020

Я делаю список задач, и у меня есть функция, которая отображает (добавляет непрозрачность) кнопку удаления, когда у меня есть мышь над соответствующим Li. 

  todosUl.addEventListener("mouseover", function(event) {
  var elementHovered = event.target;
  var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
  deleteButton.style.opacity=1;
  });
  todosUl.addEventListener("mouseout", function(event) {
  var elementHovered = event.target;
  var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
  deleteButton.style.opacity = 0;
  });

проблема в том, что всякий раз, когда я подхожу область кнопки, кнопка снова исчезает. когда это происходит, консоль показывает следующее: Не удается прочитать свойство 'style' из null

, вот как я создал Li: 

todoLi.appendChild(view.createDeleteButton(position));

createDeleteButton: function (liId) {
    var deleteButton = document.createElement('button');
    deleteButton.textContent = 'X';
    deleteButton.className = 'deleteButton';
    deleteButton.id = 'deleteButton'+liId;
    return deleteButton;

Ответы [ 2 ]

1 голос
/ 30 января 2020

По какой конкретной причине вам нужен js для этого рендеринга? Ниже приведен HTML / css модель 

.delete {
  opacity: 0;
}
li:hover > .delete {
  opacity: 1;
}
<ul id="toDos">
  <li>To Do Item 1<input type="button" class="delete" value="Delete"/></li>
  <li>To Do Item 2<input type="button" class="delete" value="Delete"/></li>
  <li>To Do Item 3<input type="button" class="delete" value="Delete"/></li>
  <li>To Do Item 4<input type="button" class="delete" value="Delete"/></li>
</ul>
0 голосов
/ 30 января 2020

Я предлагаю использовать mouseenter и mouseleave вместо mouseover и mouseout событий. 

var todosUl = document.getElementById("todoitem1");
todosUl.addEventListener("mouseenter", function(event) {
  var elementHovered = event.target;
  var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
  deleteButton.style.opacity=1;
  });
  todosUl.addEventListener("mouseleave", function(event) {
  var elementHovered = event.target;
  var deleteButton = document.getElementById("deleteButton"+elementHovered.id)
  deleteButton.style.opacity = 0;
  });
<div id='todoitem1' width='100%' style='background-color: yellow'>
  <button id="deleteButtontodoitem1" style='opacity: 0'>Delete</button>
</div>
...