Question

制作一个简单的JavaScript待办事项列表。在单击/提交时，必须通过eventListener将输入值推送到数组，在其中必须调用一个函数，清除<ul>，循环遍历数组，为每个字符串创建一个新的<li>在数组内部。我已经完成了这一点，唯一的事情就是当我点击每个<li>使用另一个eventListener删除它时，<li>会从HTML中删除，但只有数组中的第一个项被删除，而不是<li>中与数组项对应的字符串值。我希望这是有道理的:(提前谢谢！

var taskString = document.getElementById('taskString');

var list = document.getElementById('todoList');

var arr = [];

var submit = document.getElementById('submit');


list.addEventListener('click',function(event){     /////<----- EVENT LISTENER TO DELETE <li> tag
    list.removeChild(event.target);
    arr.splice(event.target.textContent,1);

});

submit.addEventListener('click', function(evt){    /////<----- EVENT LISTENER FOR THE SUBMIT BUTTON TO SEND INPUT STRING TO AN ARRAY
    arr.push(taskString.value);
    clear();
    evt.preventDefault();

});

document.getElementById('mainForm').addEventListener('submit', function(evt){       // <---- This eventListener sends the string/value of the input to an array, then runs the "clear" function
    arr.push(taskString.value);
    clear();
    evt.preventDefault();


});

function clear(){                               ////<----- FUNCTION CLEARS THE <ul>,LOOPS OVER ARRAY PUTTING EACH ITEM IN A LI TAG AND SENDING IT TO THE UL
    list.innerHTML = '';
    for(var i = 0; i < arr.length; i++){
        var task = arr[i];
        var liTag = document.createElement('li');
        liTag.setAttribute('id',i);
        liTag.textContent = task;
        list.appendChild(liTag);
        taskString.value = '';

    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="style/styles.css">


</head>
<body class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-5 col-sm-2 col-sm-offset-2 col-xs-2 col-xs-offset-2">
            <div id="app">
                <h1 id="myHdr" class="hdr">TodoList</h1>
                <form id="mainForm">
                    <input type="text" id="taskString">
                    <button class="center-block" id="submit">Submit</button>
                    <br>
                </form>
                <ul id="todoList">
                    <li class="delete">Default</li>
                </ul>
            </div>
        </div>
    </div>

Answer 1

要在单击数组时从数组中删除该元素，可以通过使用.indexOf()查找数组中的文本，然后使用该索引调用splice()来获取条目的索引。

var taskString = document.getElementById('taskString');

var list = document.getElementById('todoList');

var arr = [];

var submit = document.getElementById('submit');

list.addEventListener('click', function(event) { /////<----- EVENT LISTENER TO DELETE <li> tag
  list.removeChild(event.target);
  var idx = arr.indexOf(event.target.textContent)
  arr.splice(idx, 1);
});

submit.addEventListener('click', function(evt) { /////<----- EVENT LISTENER FOR THE SUBMIT BUTTON TO SEND INPUT STRING TO AN ARRAY
  arr.push(taskString.value);
  clear();
  evt.preventDefault();

});

document.getElementById('mainForm').addEventListener('submit', function(evt) { // <---- This eventListener sends the string/value of the input to an array, then runs the "clear" function
  arr.push(taskString.value);
  clear();
  evt.preventDefault();

});

function clear() { ////<----- FUNCTION CLEARS THE <ul>,LOOPS OVER ARRAY PUTTING EACH ITEM IN A LI TAG AND SENDING IT TO THE UL
  list.innerHTML = '';
  for (var i = 0; i < arr.length; i++) {
    var task = arr[i];
    var liTag = document.createElement('li');
    liTag.setAttribute('id', i);
    liTag.textContent = task;
    list.appendChild(liTag);
    taskString.value = '';

  }

}

<div class="row">
  <div class="col-md-2 col-md-offset-5 col-sm-2 col-sm-offset-2 col-xs-2 col-xs-offset-2">
    <div id="app">
      <h1 id="myHdr" class="hdr">TodoList</h1>
      <form id="mainForm">
        <input type="text" id="taskString">
        <button class="center-block" id="submit">Submit</button>
        <br>
      </form>
      <ul id="todoList">
        <li class="delete">Default</li>
      </ul>
    </div>
  </div>
</div>

从<li>标记中取出已通过eventListener删除的字符串，并将其从数组中删除

1 个答案: