增加或减少输入值答案

【问题标题】：increasing or decreasing the input value增加或减少输入值
【发布时间】：2021-07-05 16:37:22
【问题描述】：

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

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>

【问题讨论】：

标签： javascript html

【解决方案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 更新值。

【讨论】：