javascript - 单击加号和减号按钮并调用其功能时如何获取要更新的数量值

Question

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

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

下面是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 代码之间的链接中。你有类似 <script src="myscripts.js"></script> 的东西吗？在你的 html 中？此页面可能对您有所帮助: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>

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