JS中的購物車難以添加li元素

Question

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping list example</title>
    <style>
        li {
            margin-bottom: 10px;
        }
        
        li button {
            font-size: 8px;
            margin-left: 20px;
            color: #666;
        }
    </style>
</head>

<body>

    <h1>My shopping list</h1>

    <div>
        <label for="item">Enter a new item:</label>
        <input type="text" name="item" id="item">
        <button>Add item</button>
    </div>

    <ul>

    </ul>

    <script>
        const btn = document.querySelector('button');
        let ul = document.querySelector('ul');
        let input = document.querySelector('input');

        btn.addEventListener('click', () => {
            let v = input.textContent;

            let sp = document.createElement('span');
            let btn2 = document.createElement('button');

            sp.innerHTML = v;
            let u_i = document.createElement('li');
            u_i.appendChild(sp);

            btn2.textContent = 'delete';

            u_i.appendChild(btn2);
            input.value = '';



            ul.appendChild(u_i);

        });
    </script>
</body>

</html>

我想附加一個 li 元素，但我一直遇到錯誤。 IDK 為什么但是 li 元素的文本內容不會呈現並且它會導致錯誤。 這是一個新手問題。 這很簡單。 我想創建一個列表，將項目添加到 HTML 中的 span/ul 元素中，以便為客戶呈現完整的購物項目列表，以便他們購物時可以逐個訪問每個項目並在他們拿起項目時刪除該項目在商店里。 我相信這將是人類如何創建他們需要記住的事情列表並在他們完成他們需要做的事情時一一點擊它們的革命。 我將其稱為“檢查清單”，希望我的應用程序能夠上市並在紐約證券交易所上市，以從根本上改變人類制作清單的方式。 此列表不僅限於購物，還可以用於人類必須記錄多個項目、對象、任務、需求、想要、職責甚至行動的任何事情。

Answer 1

使用let v = input.value而不是let v = input.textContent; value 將返回輸入字段的文本值。

JS中的購物車難以添加li元素

問題描述

1 個解決方案

解決方案1
1 已采納 2022-06-07 14:31:30

JS中的購物車難以添加li元素

問題描述

1 個解決方案

解決方案1 1 已采納 2022-06-07 14:31:30

解決方案1
1 已采納 2022-06-07 14:31:30