Увеличение / уменьшение значения текстового поля с помощью JavaScript

Question

У меня проблемы с созданием JavaScript, который будет выполнять следующие действия:

Увеличение / уменьшение числа внутри текстового поля при нажатии на изображение.установка ограничения для этого текстового поля (не ниже нуля, не выше x)

пожалуйста, знайте, что у меня много текстовых полей на одной странице, так как можно решить эту проблему?

Answer 1

Вам не нужно (и не следует) устанавливать идентификаторы для каждого изображения и поля ввода. Вам нужно будет установить атрибуты имени для каждого поля ввода (чтобы ваш серверный код мог их различать, но не для 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.