как заставить значок внутри кнопки работать как кнопка (события указателя: нет; не работает) - PullRequest
Новая
       0

как заставить значок внутри кнопки работать как кнопка (события указателя: нет; не работает)

0 голосов
/ 25 мая 2020

это список задач, который должен удаляться при нажатии кнопки. внутри него есть значок. Он удаляется при нажатии кнопки, но при нажатии на значок ничего не происходит. Я попытался добавить (! важно) к событиям указателя, но он не позволяет значку использовать функции родителя.

ДОБАВЛЕНО БОЛЬШЕ ДЕТАЛЕЙ 

    <script>
        //selectors
        const todoInput = document.querySelector(".todo-input");
        const todoButton = document.querySelector(".todo-button");
        const todoList = document.querySelector(".todo-list");

        //eventlistners
        todoButton.addEventListener("click", addTodo);
        todoList.addEventListener('click', deleteCheck);

        //functions
        function addTodo(event){
        //prevent form submit
        event.preventDefault();
        //TODO DIV 
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        //create li
        const newTodo = document.createElement('li');
        newTodo.innerText = todoInput.value;
        newTodo.classList.add('todo-item');
        todoDiv.appendChild(newTodo);
        //trash button
        const trashButton = document.createElement('button');
        trashButton.innerHTML = '<i class="fas fa-trash"></i>';  
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);
        //append to list
        todoList.appendChild(todoDiv);
        //clear 
        todoInput.value = "";
          }

          function deleteCheck(e) {
              console.log(e.target);
              const item = e.target;
              //DELETE TODO
              if (item.classList[0] === 'trash-btn') {
                  const todo = item.parentElement;
                  //animation
                  todo.classList.add("fall");
                  todo.addEventListener('transitionend', function(){                
                     todo.remove();
                  });
                }
          }
    </script>
THIS IS CSSSSSSSSSSSSSSSSSSSSSSSSSSS
 <style>
     
        body{
            color: whitesmoke;
   
        }


        header, form{
            min-height:20vh;
            display:flex;
            justify-content: center;
            align-items: center;

        }

        form input, form button{
            padding: 0.5rem;
            font-size: 2rem;
            border:none;
            background-color: whitesmoke;
        }
        
        form button{
            color: black;
            background: whitesmoke;
            cursor: pointer;
            transition: all 0.5s ease;
        }

        form button:hover{
            background: black;
            color: whitesmoke;
        }

    .todo-container{
            display:flex;
            justify-content: center;
            align-items:center;
        }      
    .todo-list{
        min-width: 30%;
        list-style: none;
        }
    .todo{
   
     background :whitesmoke;
     color:black;
     font-size: 1.5rem;
     display:flex;
     justify-content: space-between;
     align-items: center;
     transition: all 0.5 ease;
        }

    .todo li{
        flex: 1;

    }
    .trash-btn{
        background: red;
        color:whitesmoke;
        border: none;
        padding: 1rem;
        cursor: pointer;
        font-size: 1rem;
    }
    .fa-trash{
        pointer-events: none ;
    }

    .fall{
        transform: translateY(8rem) rotateZ(20deg);
        opacity:0;
    }
   </style>

HTMLLLLLLLLLLLLLLLLLLLLLLLLLLLL  HERE       
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>everyday</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" initial-scale="1.0">
 
   
    <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
   
    <script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" data-auto-replace-svg="nest"></script>
    </head>
<body>

    <header>
        <h1> To do List</h1>
    </header>

    <form>
        <input type="text" class="todo-input">
        <button class="todo-button" type ="submit"><i class = "fas fa-plus-square"></i></button> 
        
    </form>

    <div class="todo-container">
        <ul class="todo-list">
        </ul>
    </div>
    </body>

Ответы [ 2 ]

0 голосов
/ 25 мая 2020

Он удаляется при нажатии кнопки, но при нажатии на значок ничего не происходит.

Это может произойти, когда вы прикрепите обработчик событий к значку и предотвратите дальнейшее распространение. Пример фрагмента 

const todoList = [{
    id: 1,
    title: 'Task 1'
  },
  {
    id: 2,
    title: 'Task 2'
  },
  {
    id: 3,
    title: 'Task 3'
  }
]

const list = document.querySelector('#list');

const buttonClick = (event) => {
  console.log('button click');
}

const iconClick = (event) => {
  console.log('icon click');
  event.stopPropagation();
}


for (let todoItem of todoList) {
  const listItem = document.createElement('li');

  const trashButton = document.createElement('button');
  trashButton.innerHTML = '<i class="fas fa-trash"></i>';

  trashButton.addEventListener("click", buttonClick);
  listItem.appendChild(document.createTextNode(todoItem.title));
  listItem.appendChild(trashButton);

  list.appendChild(listItem);

}

setTimeout(() => {
  const icons = Array.from(list.querySelectorAll("svg"));

  for (const icon of icons) {
    icon.addEventListener("click", iconClick);
  }
}, 1000);
ul {
  list-style: none;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

<ul id="list"></ul>
0 голосов
/ 25 мая 2020 
 const todo = item.parentElement;

это неправильный код. Дай мне подумать об этом. Вы создали кнопку, а затем поместили в нее значок. Затем вы добавили событие щелчка к этой кнопке. Но проблема в том, что при нажатии на эту кнопку элемент, который вы хотите удалить, является родительским элементом этой кнопки. родительский элемент значка уже является самой кнопкой. Понимаете?

Обновлено:

Я добавил строки комментариев к своим изменениям и объяснил их. Надеюсь, это понятно. Удачи! 

//selectors
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
//eventlistners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener('click', deleteCheck);

//functions
function addTodo(event) {
  //prevent form submit
  event.preventDefault();
  //TODO DIV 
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");
  //create li
  const newTodo = document.createElement('li');
  newTodo.innerText = todoInput.value;
  newTodo.classList.add('todo-item');
  todoDiv.appendChild(newTodo);
  //trash button
  const trashButton = document.createElement('button');
  trashButton.innerHTML = '<i class="fas fa-trash trash-btn"></i>'; // add trash-btn class here! 
  // trashButton.classList.add("trash-btn"); now instead of giving this class to the button itself, we can give directly to the icon.
  todoDiv.appendChild(trashButton);
  //append to list
  todoList.appendChild(todoDiv);
  //clear 
  todoInput.value = "";
}

function deleteCheck(e) {
  const item = e.target;
  //DELETE TODO
  if (item.classList[0] === 'trash-btn') {
    const todo = item.parentElement.parentElement; // Add one more parent element! 
    console.log(todo) // Look this carefully 
    // animation
    todo.classList.add("fall");
    todo.addEventListener('transitionend', function() {
      todo.remove();
    });
  }
}
body {
  color: whitesmoke;
}

header,
form {
  min-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

form input,
form button {
  padding: 0.5rem;
  font-size: 2rem;
  border: none;
  background-color: whitesmoke;
}

form button {
  color: black;
  background: whitesmoke;
  cursor: pointer;
  transition: all 0.5s ease;
}

form button:hover {
  background: black;
  color: whitesmoke;
}

.todo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.todo-list {
  min-width: 30%;
  list-style: none;
}

.todo {
  background: whitesmoke;
  color: black;
  font-size: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.5 ease;
}

.todo li {
  flex: 1;
}

.trash-btn {
  color: red;
  border: none;
  padding: .4rem;
  cursor: pointer;
  font-size: 2rem;
}

.fa-trash {
  pointer-events: none;
}

.fall {
  transform: translateY(8rem) rotateZ(20deg);
  display: none;
  /*  if you use opacity here, the Delete button will not work after a while. it makes more sense for the item to disappear completely using display none */
}
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" data-auto-replace-svg="nest"></script>

<header>
  <h1> To do List</h1>
</header>

<form>
  <input type="text" class="todo-input">
  <button class="todo-button" type="submit"><i class = "fas fa-plus-square"></i></button>

</form>

<div class="todo-container">
  <ul class="todo-list">
  </ul>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...