单击按钮时，我想使用 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>

给你：实施例： 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 功能，这样它们就可以单独使用了

这是您的代码示例

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

根据您提供的设计，您似乎希望能够在多个 "items".

上使用它

考虑到这一点，您将无法使用 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;
}

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

On button click I want to increment the value of text field by one using Javascript

html

javascript

dom-events

bootstrap-4