如何設置最小 Increment ++ 和 Decrement -- 值（不能低於 1）+ 如何減少或增加按鈕附加值

Question

我正在開發一家提供 2 個預分配選項的網上商店（XX 買兩個，XY 買 3 個）。 我還添加了一個普通的 - 0 + 系統，客戶可以選擇不同數量的產品。

我寫了一些代碼，它單獨適用於 +- 或 2,3，但如果我想減少由 2,3 按鈕添加的數字，它不會從 3 變為 2，而是變為 0 或 -1。 所以，我希望能夠選擇預定義的選項 2 或 3，但我也希望它可以通過 +- 按鈕進行編輯。 有什么建議？

<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="0"></input>
<button class="plus" onclick="buttonClicDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
  function spremembax() {
    document.getElementById("gumb2").value = "2";
  }

  function spremembay() {
    document.getElementById("gumb2").value = "3";
  }
  var i = 0;

  function buttonClickUP() {
    i++;
    document.getElementById('gumb2').value = i;
    if (i <= 0) {
      i = 0;
      display(i);
    }
  }
  var i = 0;

  function buttonClickDOWN() {
    i--;
    document.getElementById('gumb2').value = i;
    if (i <= 0) {
      i = 0;
      display(i);
    }
  }

</script>

Answer 1

正如我在評論中已經提到的，您在buttonClicDOWN有一個錯字.......missing k 。 您直接增加/減少元素的值。 請看修改后的函數：

 <button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button> <button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button> <button class="plus" onclick="buttonClickUP();">+</button> <input type="text" id="gumb2" value="1"></input> <button class="plus" onclick="buttonClickDOWN();">-</button> <input type="text" id="order" value="ORDER NOW"></input> <script> function spremembax() { document.getElementById("gumb2").value = "2"; } function spremembay() { document.getElementById("gumb2").value = "3"; } function buttonClickUP() { var el = document.getElementById('gumb2'); el.value = Number(el.value) + 1; } function buttonClickDOWN() { var el = document.getElementById('gumb2'); if(el.value == 1) return false; el.value = Number(el.value) - 1; } </script>

Answer 2

為什么不簡單地使用input type="number" ？

 <button class="gumb_shop2" onclick="gumb2.value=2">2 for 10,99 €</button> <button class="gumb_shop3" onclick="gumb2.value=3">3 for 8,99 €</button> <input type="number" id="gumb2" value="1" step="1" min="1" /> <input type="button" id="order" value="ORDER NOW" />

Answer 3

我將其添加為評論，但無法添加代表。 所以一個答案：

---

簡而言之：按下2或3按鈕時，您不會更新全局變量i ，因此當您增加/減少i並將其分配給 value 屬性時，您確實會覆蓋舊值。

我建議刪除i （全局）變量，只使用 value 屬性，例如

function buttonClickDOWN() {
    var elm = document.getElementById('gumb2');
    if (elm.value > 0) 
        elm.value--;
    else 
        elm.value = 0;
}

PS：當您使用文本類型輸入時，您可能還需要考慮用戶可能輸入的非數字。

Answer 4

這是一個符合您規格的簡單示例：

<button onclick="setAbs(event)" data-val="2">2 for 10,99 €</button>
<button onclick="setAbs(event)" data-val="3">3 for 8,99 €</button><br/><br/>
<button onclick="down()">-</button>
<input size="2" id="counter" value="0" />
<button onclick="up()">+</button><br/><br/>
<input type="submit" value="Submit" />
<script>
  let counter = document.getElementById("counter");
  function setAbs(event){
    counter.value = event.target.dataset.val;
  }
  function up(){ 
    counter.value = parseInt(counter.value) + 1;
  }
  function down(){ 
    if(counter.value > 0){
      counter.value = parseInt(counter.value) - 1;
    }
  }
</script>

Answer 5

這是我一直在尋找的答案。

謝謝@Mamun 的快速回復。

<button class="gumb_shop2" onclick="spremembax()">2 for 10,99 €</button>
<button class="gumb_shop3" onclick="spremembay()">3 for 8,99 €</button>
<button class="plus" onclick="buttonClickUP();">+</button>
<input type="text" id="gumb2" value="1"></input>
<button class="plus" onclick="buttonClickDOWN();">-</button>
<input type="text" id="order" value="ORDER NOW"></input>
<script>
  function spremembax() {
    document.getElementById("gumb2").value = "2";
  }

  function spremembay() {
    document.getElementById("gumb2").value = "3";
  }

  function buttonClickUP() {
    var el = document.getElementById('gumb2');
    el.value = Number(el.value) + 1;
  }

  function buttonClickDOWN() {
    var el = document.getElementById('gumb2');
    if(el.value == 1) return false;
    el.value = Number(el.value) - 1;
  }

</script>