增加或减少输入值

Question

我正在尝试制作一个简单的网店购物车，但我目前遇到了一个问题。 每当我单击加号或减号按钮时，我都想增加或减少输入的值。 要显示加号和减号按钮，请单击“添加到购物车”。 每当我单击加号或减号按钮时，如何增加或减少输入的值？ 先感谢您。

 const foodList = document.getElementById('foodList'); const foodListOrder = document.getElementById('foodOrderList'); const inputAmount = document.getElementById('input'); const plusBtn = document.getElementById('plusBtn'); const minusBtn = document.getElementById('minusBtn'); foodList.addEventListener('click', (event) => { if (event.target.tagName === 'BUTTON') { let parentButton = event.target.parentNode; let button = parentButton.firstElementChild; let addListOrder = document.createElement('li'); parentButton.removeChild(button); addListOrder.innerHTML = `${parentButton.textContent} <input type="text" id="input" value="1"> <button id="plusBtn">+</button> <button id="minusBtn">-</button>` foodListOrder.appendChild(addListOrder); } })

 ul li { list-style: none; }

 <!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>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <p>Food List</p> <ul id="foodList"> <li>Chicken <button>Add to cart</button></li> <li>Meat <button>Add to cart</button></li> <li>Hot-Dog <button>Add to cart</button></li> <li>Fries <button>Add to cart</button></li> <li>Hamburger <button>Add to cart</button></li> <li>Ice-Cream <button>Add to cart</button></li> <li>Spaghetti <button>Add to cart</button></li> </ul> </div> <hr> <div> <p>My Shopping Cart</p> <ul id="foodOrderList"> </ul> </div> <script src="javascript.js"></script> </body> </html>

Answer 1

那么你能做的是，而不是为每个加号和减号按钮提供静态和相同的 id，你可以在你的项目的基础上为它们提供动态 ID。 就像是

addListOrder.innerHTML = `${parentButton.textContent} <input type="text" id=${input + parentButton.textContent}value="1"> <button id=${add + parentButton.textContent}>+</button> <button id=${remove + parentButton.textContent}>-</button>`

通过这种方式，您将拥有每个字段的唯一 ID，您可以向按钮添加事件侦听器或 onClick 函数，或者使用事件侦听器侦听从哪个输入字段触发的事件。

使用通过事件收到的 ID 更新值。

增加或减少输入值

问题描述

1 个解决方案

解决方案1
0 2021-07-05 08:37:22

增加或减少输入值

问题描述

1 个解决方案

解决方案1 0 2021-07-05 08:37:22

解决方案1
0 2021-07-05 08:37:22