如何將商品添加到此購物清單
[英]How do I add items to this shopping list
問題描述
我無法讓這段代碼工作，但我不知道為什么。 我需要將我鍵入的內容作為項目添加到列表中。
我知道有更好的方法可以實現這一結果，但我正在努力了解基本原理。 請使用下面的變量解釋我做錯了什么：
let input = document.getElementsByTagName("input")[0]; const button = document.getElementsByTagName("button")[0]; let ul = document.getElementsByTagName("ul")[0]; button.addEventListener("click", function(){ // create a list item let li = document.createElement("li"); // create text node const liText = document.createTextNode(input.value); //append text to li: <li> input value </li> let newLi = li.appendChild(liText); //append li to ul let newList = ul.appendChild(newLi); return newList; });
<,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>Shopping List</title> </head> <body> <h1>Shopping List</h1> <h2>Get it done today</h2> <input type="text" placeholder="enter items"> <button>Enter</button> <ul> <li>Notebook</li> <li>Jello</li> <li>Spinach</li> <li>Rice</li> <li>Birthday Cake</li> <li>Candles</li> </ul> <script src="script.js"></script> </body> </html>
謝謝！
2 個解決方案
解決方案1
2 2021-05-30 19:41:43
Append 你的li ，而不是appendChild()到ul的結果。
let input = document.getElementsByTagName("input")[0]; const button = document.getElementsByTagName("button")[0]; let ul = document.getElementsByTagName("ul")[0]; button.addEventListener("click", function(){ // create a list item let li = document.createElement("li"); // create text node const liText = document.createTextNode(input.value); //append text to li: <li> input value </li> li.appendChild(liText); //append li to ul ul.appendChild(li); });
<,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>Shopping List</title> </head> <body> <h1>Shopping List</h1> <h2>Get it done today</h2> <input type="text" placeholder="enter items"> <button>Enter</button> <ul> <li>Notebook</li> <li>Jello</li> <li>Spinach</li> <li>Rice</li> <li>Birthday Cake</li> <li>Candles</li> </ul> <script src="script.js"></script> </body> </html>
另一種方法是：
let input = document.getElementsByTagName("input")[0]; const button = document.getElementsByTagName("button")[0]; let ul = document.getElementsByTagName("ul")[0]; button.addEventListener("click", function(){ // create a list item let li = document.createElement("li"); //append text to li: <li> input value </li> li.textContent = input.value; //append li to ul ul.appendChild(li); });
<,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>Shopping List</title> </head> <body> <h1>Shopping List</h1> <h2>Get it done today</h2> <input type="text" placeholder="enter items"> <button>Enter</button> <ul> <li>Notebook</li> <li>Jello</li> <li>Spinach</li> <li>Rice</li> <li>Birthday Cake</li> <li>Candles</li> </ul> <script src="script.js"></script> </body> </html>
解決方案2
1 已采納 2021-05-30 19:42:08
如此處所寫：
返回的值（
appendChild）是附加的孩子
這意味着當您 append 到ul newLi時，您實際上 append 是文本節點liText ，而不是li元素。 這就是為什么您不將其視為列表項的原因。
只需像這樣使用 li ：
let input = document.getElementsByTagName("input")[0]; const button = document.getElementsByTagName("button")[0]; let ul = document.getElementsByTagName("ul")[0]; button.addEventListener("click", function() { // create a list item let li = document.createElement("li"); // create text node const liText = document.createTextNode(input.value); //append text to li: <li> input value </li> li.appendChild(liText); //append li to ul let newList = ul.appendChild(li); return newList; });
<h1>Shopping List</h1> <h2>Get it done today</h2> <input type="text" placeholder="enter items"> <button>Enter</button> <ul> <li>Notebook</li> <li>Jello</li> <li>Spinach</li> <li>Rice</li> <li>Birthday Cake</li> <li>Candles</li> </ul>
我如何制作具有添加產品按鈕和空按鈕的購物清單
[英]How do i make this shopping list that has an add product button and an empty button
“如何將項目添加到列表中，然后添加到下面的空白區域？”
[英]“How do I add items to a list and then add to the empty space below?”
如何將按鈕動態添加到 javascript 中的數組項列表中
[英]How do I dynamically add Buttons to a list of Array ITEMS in javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.