Увеличение количества

[Kaba]

Всем привет )

Есть форма с текстовым полем и кнопкой увеличения значения поля на 1:

<form>
    <input type="text" size="5" value="1" />
    <input type="button" onclick="add(this)" value="+" />
</form>

И сам js код:

function add(element){
    element.parentNode.getElementsByTagName('input')[0].value = parseInt(element.parentNode.getElementsByTagName('input')[0].value) + 1;
}

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

[bes]

<input type="text" id="inp" size="5" value="1">
<input type="button" value="+" 
  onclick="
    inp.value = parseInt(inp.value) + 1
">

[Kaba]

Нет, это совсем не то, id у поля отсутствует.
Возможно добавление id к родителю, но при этом потомки будут анологичными, т.е. что то вроде этого:

<div id="parent">
<form>
    <input type="text" size="5" value="1" />
    <input type="button" onclick="add(this)" value="+" />
</form>
...
<form>
    <input type="text" size="5" value="1" />
    <input type="button" onclick="add(this)" value="+" />
</form>
</div>

[bes]

Нет, это совсем не то, id у поля отсутствует.

Что мешает его добавить?

Возможно добавление id к родителю, но при этом потомки будут анологичными

Смысл второй половины фразы не совсем (совсем не) понятен.

Не очень-то понятно чего вы хотите добиться, если ваша функция делает то же самое, что и у меня обработчик onclick.
Так лучше??

<div id="myDiv">
<input type="text" size="5" value="1">
<input type="button" value="+" 
  onclick="
    myDiv.children[0].value = parseInt(myDiv.children[0].value) + 1
">
</div>

[Kaba]

Элементов с формой на странице может быть довольно много и наверное правильнее написать один раз функцию, чем повторять весь этот код в событии. Как раз id тем же и плох, то что как то неразумно задавать к примеру 100 элементам разные id. По классу же слишком сложная выборка, поэтому и приходится извращаться с DOM деревом и фунцией.

Смысл второй половины фразы не совсем (совсем не) понятен.

Т.е. у множества форм, один общий родитель к которому можно задать id.

[bes]

Элементов с формой на странице может быть довольно много и наверное правильнее написать один раз функцию, чем повторять весь этот код в событии.

Так и надо было сразу писать, что предполагается много однотипных элементов, каждый из которых должен обладать такими-то качествами (здесь не все умеют читать чужие мысли).

<div id="myDiv" 
  onclick = "
    var a = this.getElementsByTagName('input');
    var e = event.srcElement || event.target;
    if (e.type == 'button') {
      for (i=0; i<a.length; i++) {
        if (a[i] == e) {
          a[i-1].value = parseInt(a[i-1].value) + 1; 
          break;
        }
      }
    }
">

<input type="text" size="5" value="1">
<input type="button" value="+">

<input type="text" size="5" value="1">
<input type="button" value="+">
</div>

<!--для этого не сработает, так как он вне div-->
<input type="text" size="5" value="1">
<input type="button" value="+">

Если хотите вынесите код обработчика в функцию.

[ghrd]

<input type="text" id="inp" size="5" value="1">
<input type="button" value="+" 
  onclick="
    inp.value = parseInt(inp.value) + 1
">

Уважаемый, подскажите пожалуйста как добавить ограничение на увеличения/уменьшения значения?
к примеру, могу увеличить поле до 5, а уменьшить только до 1

[lord2kim]

Уважаемый, подскажите пожалуйста как добавить ограничение на увеличения/уменьшения значения?
к примеру, могу увеличить поле до 5, а уменьшить только до 1

<input type="text" id="inp" size="5" value="1">
<input type="button" value="+"
  onclick="
    inp.value = parseInt(inp.value) >= 5 ? '5' : (parseInt(inp.value) < 1 ? '1' : parseInt(inp.value) + 1)
">

осталось только сделать вторую кнопку и присобачить к ней соответствующее условие для уменьшения значения

[ghrd]

<input type="text" id="inp" size="5" value="1">
<input type="button" value="+"
  onclick="
    inp.value = parseInt(inp.value) >= 5 ? '5' : (parseInt(inp.value) < 1 ? '1' : parseInt(inp.value) + 1)
">

(parseInt(inp.value) <= 1 ? '1'

при < 1 минусует не правильно. сперва уменьшается до нуля, потом единица

[lord2kim]

<img src="-.jpg" class="onclick" onclick="inp.value = parseInt(inp.value) < 1 ? '1' : parseInt(inp.value) - 1"/>
<input tape="text" id="inp" value="1" class="input">
<img src="+.jpg" class="onclick" onclick="inp.value = parseInt(inp.value) >= 5 ? '5' : parseInt(inp.value) + 1"/>

минусует не правильно. сперва уменьшается до нуля, ниже единица

<img src="-.jpg" class="onclick" onclick="inp.value = parseInt(inp.value) <= 1 ? '1' : parseInt(inp.value) - 1"/>

или оформите в виде функции и передавайте туда в качестве параметров пороги (1,5 или др...)