Why button dont work in html and javascript?

Why increment and decrement buttons dont work, they was working well but when I add type="button" stop working.

> 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";
    }
}

The main issue is that you are using inline event handlers. In this context, increment refers to the button with the id of increment rather than the function. You also pass no argument to increment and decrement so button is undefined in both.

Use addEventListener with event.target instead.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.querySelector('#increment').addEventListener('click', e => increment(e.target));
document.querySelector('#decrement').addEventListener('click', e => decrement(e.target));

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";
    }
}

<!-- language: lang-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" 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" 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>

<!-- end snippet -->