使用 object 在数组上映射时出现问题-解网

问：

我想在每次创建新任务时插入 div 类“选项”中的这些按钮。因为当我们在写完第一个任务后在输入字段中编写另一个任务时，这些图标不会出现，我希望它们出现以便稍后创建一个函数来删除和添加任务。我使用 map mathod 在我的 accepetData 函数中创建了一个无序列表（），这样我就可以在 todos 数组上映射，并且对于 todo 数组中的每个元素，我将创建一个新的列表任务。我想用带有图标的按钮做同样的事情

const data = {
  toDo: [],
  doing: [],
  done: []
}; 

const convertToArray = Object.keys(data);

function confirmButton() {
  modalConfirm.addEventListener('click', () => {
    hideModal();

    const inputValue = input.value;
   
    data.toDo.push(inputValue);

    // `map` over the todos array and return a template string
    // describing an HTML list element with the todo text as text content
    // `join` up the array into a string upon completion

    let accepetData = () => {
      text.innerHTML = data.toDo.map(todo => {
        
        return `
        <li>${todo}</li>
        `;
      }).join('');
    }

    accepetData();

  });
}

confirmButton();

.adding-task.hide{
    display:none;
}

.adding-task {
  width: 100%; 
}

.task-descrip {
    list-style: none;
    margin-left: 0;
    padding: 0px 3px; 
    position: relative;

   
}

.task-descrip li { 
  margin-top: 0.3em;
  background-color: white;
  border-radius: 5px;
  padding: 0.75em 0.76em;
  font-family: 'Open Sans';
  font-weight: 500; 
  display: flex;


}
.options{
    position: absolute;
    bottom: 82px;
    left: 294px;
    display: flex;
}
.btn1{
    margin-right: 4px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To do list- Projeto de alto escalão</title>
    <link rel="stylesheet" href="ToDoProject.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />

</head>
<body>
        
    <h1>To do list</h1>

    <div class="cards">

        <div class="card redd">
            <p class="stats">🙂 To do</p>

            <div class="adding-task hide">
                <ul class="task-descrip">
                    
                </ul>
                <div class="options">
                   <button class="btn1">
                        <i class="fas fa-edit"></i></button>
                
                    <button class="btn2">
                        <i class="fas fa-trash-alt"></i>
                    </button> 
                </div>
          

    <script src="ToDoProject.js"></script>

</body>
</html>

JavaScript HTML CSS 数组对象

使用 object 在数组上映射时出现问题

Issue with mapping over arrays using object

评论