Question

我正在尝试制作一个非常基本的待办事项列表。我研究并查看了许多例子无济于事。我想要做的就是能够点击已添加到我的列表中并删除它的项目。我不确定如何访问在我的项目中输入的值，或者如何将它们操作到函数中。

function todoList() {
  let item = document.getElementById('todoInput').value //pulling value from input box
  let text = document.createTextNode(item) //turning input text into node
  let newItem = document.createElement('li') //creates a list
  newItem.appendChild(text) //appends task entered from input
  document.getElementById('todoList').appendChild(newItem) //appends the entered task to the list
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>To do list</title>
</head>

<body>
  <h1>To Do List</h1>
  <form id="todoForm">
    <input type="text" id="todoInput">
    <button type="button" onclick="todoList()">Add Item</button>
  </form>
  <ul id="todoList"></ul>
  <script src="app.js"></script>
</body>

</html>

Answer 1

这是一个可能的行动方案。有很多方法可以做到，这是一个有用的方法。

我为你打破了它。我还重命名了你的添加功能，以便更清楚它的作用：

<!DOCTYPE html>
<html>

<head>
    <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
    <title>To do list</title>
    <!-- Put this in your style.css -->
    <style>
        .item {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>To Do List</h1>
    <form id="todoForm">
        <input type="text" id="todoInput">
        <button type="button" onclick="addItem()">Add Item</button>
    </form>
    <ul id="todoList"></ul>
    <!-- <script src="app.js"></script> -->
</body>

</html>

<script>
    function addItem(){
        //get current number of todo Items (for creating the ID)
        const currentNumberOfItems = document.querySelectorAll('.item').length
        console.log(currentNumberOfItems)
        console.log('Research:', document.querySelectorAll('.item'))

        const item = document.getElementById('todoInput').value //pulling value from input box
        const text = document.createTextNode(item) //turning input text into node
        const newItem = document.createElement('li') //creates a list
        newItem.id = currentNumberOfItems //give the new <li> an auto-incrementing id property
        newItem.classList.add('item') //add the item class so we can search for it by class
        //we didn't end up searching by class, but you can find every <li> on the page
        //using console.log(document.querySelectorAll('.item'))
        newItem.appendChild(text) //appends task entered from input
        document.getElementById('todoList').appendChild(newItem) //appends the entered task to the list

        const btn = document.createElement('button') // Create a <button> element
        const t = document.createTextNode('Delete')  // Create a text node
        btn.appendChild(t)                           // Append the text to <button>
        newItem.appendChild(btn)                     // Append <button> into the new <li>

        //we are going to create an event listener on the button
        //this takes 2 parameters
        //first = event type (on click)
        //second = callback function to run when the event is detected
        btn.addEventListener('click', function(event) {
            console.log(event.target.parentNode) //we want the element in which the button exists
            console.log('Research:', event) //look at all the stuff in here!
            deleteItem(event.target.parentNode) //run our delete function
        })
    }

    //now that we have an event listener and know the parent
    //we just have to find a way to delete the parent
    //we can call the input anything, and it will be a DOM element (event.target.parentNode)
    function deleteItem(parent) {
        console.log(parent.id) //lets check the parent's id

        //we can use element.removeChild() to ditch the todo item
        //first, we have to get the <ul> somehow
        const todoList = document.getElementById('todoList') //let's get the <ul> by ID
        todoList.removeChild(parent) //cya later "parent that the button was inside of"
    }
</script>

我试图把它变成一个片段，但是当你删除时代码编辑器似乎崩溃了，所以我会这样离开它。

加成

您会看到我使用const而不是let，因为它不允许重新分配，这会告诉JavaScript和其他编码人员，一旦设置了变量，您就不打算更改该变量。

您可以将其放入JS文件中进行抽样：

app.js

'use strict'
const test = 'cool'
test = 'not cool'
console.log(test)

注意现在使用let的行为（交换代码）：

'use strict'
let test = 'cool'
test = 'not cool'
console.log(test)

这一些具有“不变性”的基础知识，当你想要阅读时，你应该研究一下。这意味着当你意外地改变一些变量时，你不必担心奇怪的错误。如果你尝试，const会生气。

更高级，您仍然可以在使用const时重新指定对象的属性：

const object = {
    name: 'Bob Alice'
}
object.name = 'Not Bob Anymore'

当您使用let时，它告诉您自己和其他编码人员您希望变量的值可能会在代码附近的某处发生变化。

我建议您尝试一下，如果您遇到任何问题，只需Google，您就会很快发现。别担心，如果你总是使用const“除非你不能”，否则什么都不会爆炸。问题只会出现在高级代码中，const与let对比var。

待办事项列表app删除功能js

1 个答案: