使用 javascript 增加/减少文本字段值

Question

我在执行以下操作的 javascript 时遇到问题：

单击图像时增加/减少文本框中的数字。 为该文本框设置限制（不低于零，不高于x）

请知道我在同一页面中有很多文本框，那么如何解决这个问题？

Answer 1

您不需要（也不应该）为每个图像和输入字段设置 id。不过，您需要为每个输入字段设置名称属性（以便您的服务器代码可以区分它们 - 但不适用于 JS）。

如果每行的“添加”部分如下所示：

<div>
  <img src='minus.png' onclick="increment(this.parentNode.getElementsByTagName('input')[0]);" />
  <input type='text' name='product_1010101011' />
  <img src='plus.png' onclick="decrement(this.parentNode.getElementsByTagName('input')[0]);" />
</div>

使用以下 javascript：

function increment(myInput) {
  // use Mike Samuel's code here
  myInput.value = (+myInput.value + 1) || 0;
}
function decrement(myInput) {
  // use Mike Samuel's code here
  myInput.value = (myInput.value - 1) || 0;
}

Answer 2

我认为这应该让您继续前进：

<form>
    <input type="button" id="minus" value="-" 
    onClick="textb.value = (textb.value-1)">
    <input type="text" id="textb" name="name" value="1" />
    <input type="button" value="+" 
    onClick="textb.value = (+textb.value+1)">
</form>

实时示例此处

Answer 3

递增

myInput.value = (+myInput.value + 1) || 0;

递减

myInput.value = (myInput.value - 1) || 0;

|| 0 会将任何不解析为整数的值重置为默认值 0。