单击加号和减号按钮并调用它们的函数时如何获取要更新的数量值

Question

对于我正在开发的礼品网站，我很难使用加号和减号按钮更改数量。表格中的页面上显示了多个项目，因此理想情况下，我可以单独更改每个项目的数量。

在 html 脚本标签中，我插入了一个 JavaScript 脚本，其中包含每次按下相应按钮时递增和递减值的函数，但是在运行 Web 应用程序时，点击按钮时什么都没有发生

下面是html中的脚本：

<script>
var count = 1;
var countEl = document.getElementById("count");
function plus(){
    count++;
    countEl.value = count;
}
function minus(){
    if (count > 1) {
        count--;
        countEl.value = count;
    }
}
</script>

以下是包含按钮的 html 代码：

 <c:forEach var = "row" items = "${result.rows}">
        <tr>
            <td><c:out value = "${row.gift_code}"/></td>
            <td><c:out value = "£${row.price}"/></td>
            <td><c:out value = "${row.stock}"/></td>
            <td><div id="outer">
                <div><button type="button" name="button"onclick="minus()"><img src="minus.jpg" alt="minus"/></button></div>
                <div><input type="text" name="name" value="1" size="10" id="count"></div>
                <div><button type="button" name="button"onclick="plus()"><img src="plus.jpg" alt="plus"/></button></div>
                </div>
            </td>
            <td>
                <form action="order.jsp" method="GET">
                    <input type = "hidden" name = "gift_code"
                           value = "${row.gift_code}" />
                    <input type = "hidden" name = "price"
                           value = "${row.price}" />
                    <input type = "submit" value = "Add to giftlist" />
                    <input type = "hidden" name = "stock"
                           value = "${row.stock}" />

                </form>
            </td>
        </tr>

    </c:forEach>

当点击加号按钮时，数量应该增加1，当点击减号按钮时，数量应该减少1，但数量当前保持不变

Answer 1

我测试了您的代码，它运行良好，但它不适用于多个输入，因为您将使用相同的变量。如果您的代码不起作用并且您的 html 与您提出的完全一样，则问题可能出在您的 html 和您的 javascript 代码之间的链接中。您的 html 中有类似 <script src="myscripts.js"></script> 的内容吗？此页面可能对您有所帮助：https://www.w3schools.com/tags/att_script_src.asp

如果不是，这里有一个适用于多个输入的示例：

function plus(elem){
    let targetElem = elem.parentNode.previousElementSibling.childNodes[0];
    let targetCount = parseInt(targetElem.value);
    targetCount++;
    targetElem.value = targetCount;
}
function minus(elem){
    let targetElem = elem.parentNode.nextElementSibling.childNodes[0];
    let targetCount = parseInt(targetElem.value);
    if (targetCount > 1) {
        targetCount--;
        targetElem.value = targetCount;
    }
}

<c:forEach var = "row" items = "${result.rows}">
        <tr>
            <td><c:out value = "${row.gift_code}"/></td>
            <td><c:out value = "£${row.price}"/></td>
            <td><c:out value = "${row.stock}"/></td>
            <td><div id="outer">
                <div><button type="button" name="button"onclick="minus(this)"><img src="minus.jpg" alt="minus"/></button></div>
                <div><input type="text" name="name" value="1" size="10" id="count1"></div>
                <div><button type="button" name="button"onclick="plus(this)"><img src="plus.jpg" alt="plus"/></button></div>
                
                                <div><button type="button" name="button"onclick="minus(this)"><img src="minus.jpg" alt="minus"/></button></div>
                <div><input type="text" name="name" value="1" size="10" id="count2"></div>
                <div><button type="button" name="button"onclick="plus(this)"><img src="plus.jpg" alt="plus"/></button></div>
                </div>
            </td>
            <td>
                <form action="order.jsp" method="GET">
                    <input type = "hidden" name = "gift_code"
                           value = "${row.gift_code}" />
                    <input type = "hidden" name = "price"
                           value = "${row.price}" />
                    <input type = "submit" value = "Add to giftlist" />
                    <input type = "hidden" name = "stock"
                           value = "${row.stock}" />

                </form>
            </td>
        </tr>

    </c:forEach>

注意函数中添加的参数以及我使用元素的方式对应的输入。如果您对它的工作原理有任何疑问。欢迎随时提问。