HTML与JavaScript增减按钮失效：添加type="button"后停止工作

问题描述 #

增减按钮原本运行正常，但为按钮添加type="button"属性后突然失效，对应的代码如下：

HTML代码 #

<form th:action="@{/home}" method="post" style="margin-top: 10px; display: block">
      <div style="margin-bottom: 10px; margin-top: 10px;">
          <button type="button" name="decrement"  onclick="decrement()" style="display: inline; margin-right: 5px; width: 20px" id="decrement">-</button>
          <output style="display: inline" name="quantity" id="quantity">0</output>
          <button type="button" name="increment" onclick="increment()" style="display: inline; margin-left: 5px; width: 20px" id="increment">+</button>
          <input type="hidden" name="itemId" th:value="${item.getItem_id()}"/>
          <button type="submit" name="addToCart" class="addToCart-btn">Add to cart</button>
       </div>
</form>

JavaScript代码 #

function increment(button) {
    var counter = button.parentNode.querySelector("output");
    counter.textContent++;
    updateAddToCartButton(button)
}

function decrement(button) {
    var counter = button.parentNode.querySelector("output");
    if (counter.textContent > 0) {
        counter.textContent--;
        updateAddToCartButton(button)
    }
}

function updateAddToCartButton(button) {
    var quantity = parseInt(button.parentNode.querySelector("#quantity").innerText);
    var submitButton = button.parentNode.querySelector(".addToCart-btn");

    if (quantity > 0) {
        submitButton.style.display = "inline";
    } else {
        submitButton.style.display = "none";
    }
}

原因分析 #

你的JS函数increment和decrement都依赖传入的button参数来定位计数器元素和提交按钮，但HTML中调用这两个函数时，没有传递当前按钮的引用（即this）。

之前未添加type="button"时，按钮默认类型为submit，浏览器的表单提交行为可能让函数意外获取到了按钮对象（或是你之前的代码中传递了this，后续修改时遗漏）；但添加type="button"后，按钮仅触发单纯的点击事件，没有额外上下文传递，导致函数内的button参数为undefined，调用button.parentNode时直接抛出错误，函数无法正常执行。

解决方案 #

方案1：修改HTML调用，传递按钮引用 #

直接在onclick事件中传入当前按钮的this引用，让函数能正确获取按钮元素：

修改后的按钮代码：

<button type="button" name="decrement" onclick="decrement(this)" style="display: inline; margin-right: 5px; width: 20px" id="decrement">-</button>
<button type="button" name="increment" onclick="increment(this)" style="display: inline; margin-left: 5px; width: 20px" id="increment">+</button>

这种方式无需修改JS代码，且支持页面中存在多个同类增减组件的场景，通用性更强。

方案2：修改JS函数，通过ID直接定位元素 #

如果页面只有这一组增减按钮，可以修改JS函数，直接通过ID获取元素，无需依赖传入的按钮参数：

修改后的JS代码：

function increment() {
    var counter = document.getElementById("quantity");
    counter.textContent++;
    updateAddToCartButton();
}

function decrement() {
    var counter = document.getElementById("quantity");
    if (parseInt(counter.textContent) > 0) {
        counter.textContent--;
        updateAddToCartButton();
    }
}

function updateAddToCartButton() {
    var quantity = parseInt(document.getElementById("quantity").innerText);
    var submitButton = document.querySelector(".addToCart-btn");

    if (quantity > 0) {
        submitButton.style.display = "inline";
    } else {
        submitButton.style.display = "none";
    }
}

这种方式无需修改HTML，但如果页面有多个同类组件，会因ID重复导致逻辑混乱，仅适用于单一场景。

内容的提问来源于stack exchange，提问作者juan