单击按钮时，我想使用 Javascript 将文本字段的值增加一

Question

我希望每个按钮都增加它旁边的值文本字段

<input type="number" value="0" min="0" max="5" step="1" id="qty"/>
<button onclick="buttonClick()" type="button" class="btn btn-success btn-sm" id="add">ADD</button>

Javascript：

var i = 0;
function buttonClick() {
    document.getElementById('qty').value = ++i;
}

我正在使用此代码，但它仅在按下页面上的任何按钮后才向第一个文本字段添加值。

Answer 1

 function incrementValue() { var value = parseInt(document.getElementById('number').value, 10); value = isNaN(value)? 0: value; value++; document.getElementById('number').value = value; }

 <form> <input type="text" id="number" value="0"/> <input type="button" onclick="incrementValue()" value="Increment Value" /> </form>

这里是 go： 实现示例：Html

<form>
   <input type="text" id="number" value="0"/>
   <input type="button" onclick="incrementValue()" value="Increment Value" />
</form>

Javascript：

function incrementValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
}

Answer 2

由于您说该按钮仅向第一个文本字段添加值，因此您可以为每个文本字段赋予不同的 ID，并使用其自己的onclick function 以便它们可以单独使用

这是您的代码示例

 var i = 0; var x = 0; var y = 0; function buttonClick1() { document.getElementById('qty1').value = ++i; } function buttonClick2() { document.getElementById('qty2').value = ++x; } function buttonClick3() { document.getElementById('qty3').value = ++y; }

 <input type="number" value="0" min="0" max="5" step="1" id="qty1" /> <button onclick="buttonClick1()" type="button" class="btn btn-success btn-sm" id="add">ADD</button> <input type="number" value="0" min="0" max="5" step="1" id="qty2" /> <button onclick="buttonClick2()" type="button" class="btn btn-success btn-sm" id="add">ADD</button> <input type="number" value="0" min="0" max="5" step="1" id="qty3" /> <button onclick="buttonClick3()" type="button" class="btn btn-success btn-sm" id="add">ADD</button>

.

Answer 3

你好@Hemanshu Dharmik；

你可能应该做这样的事情：

 var i = 0; function buttonClick() { 
     document.getElementById('add').value = i++; } </script>

我希望这能让你的柜台正常工作。

Answer 4

根据您提供的设计，您似乎希望能够在多个“项目”上使用它。

考虑到这一点，您将无法使用 ID。 为了解决这个问题，你可以做这样的事情，同时利用一些基于 dom 的 javascript 操作。

    <div class="item">
      <input type="number" value="0" min="0" max="5" step="1"/>
      <button onclick="buttonClick(this)" type="button" class="btn btn-success btn-sm">ADD</button>
    </div>

就 javascript 而言，因为按钮位于文本输入字段之后，您可以使用element.previousElementSibling

function buttonClick(element) {
  let qtyBox = element.previousElementSibling;
  qtyBox.value = parseInt(qtyBox.value) + 1;
}