Как добавить к значению текстовое поле

Question

У меня есть форма ниже.Используя кнопки, значение в текстовом поле должно быть увеличено или уменьшено.Кнопка уменьшения работает нормально, но кнопка увеличения просто добавляет «10» к концу числа, поэтому 100 станет 10010, а не 110.Может кто-нибудь сообщить мне, как это исправить?

<form name="hello" id="hello">
<table border=0>
<tr>
<td width=200>
<input type=text id="input" style="height: 30px; width: 200px" name=amount value=5>
</td>
<td>
<table border=0>
<tr height=12><td width=20>
<input type=button value="+" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value+=10;">
</td></tr>
<tr height=12><td width=20>
<input type=button value="-" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value-=10;">
</td></tr>
</table>
</td>
</tr>
</table>
</form>

Answer 1

Ваш javascript рассматривает его как конкатенацию строк.Разобрать значение в целое число, выполнить математические вычисления, а затем установить значение.

OnClick для вашей кнопки +

onClick="javascript: this.form.amount.value = parseInt(this.form.amount.value, 10) + 10;"

Answer 2

parseInt () требуется.

Используйте это

    <form name="hello" id="hello">
<table border=0>
<tr>
<td width=200>
<input type=text id="input" style="height: 30px; width: 200px" name=amount value=5>
</td>
<td>
<table border=0>
<tr height=12><td width=20>
<input type=button value="+" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript: this.form.amount.value = parseInt(this.form.amount.value) + 10;">
</td></tr>
<tr height=12><td width=20>
<input type=button value="-" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value-=10;">
</td></tr>
</table>
</td>
</tr>
</table>
</form>

Answer 3

Вот код, который будет работать:

<form name="hello" id="hello">
<table border=0>
<tr>
<td width=200>
<input type=text id="input" style="height: 30px; width: 200px" name=amount value=5>
</td>
<td>
<table border=0>
<tr height=12><td width=20>
<input type=button value="+" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value=parseInt(this.form.amount.value,10)+10;">
</td></tr>
<tr height=12><td width=20>
<input type=button value="-" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value=parseInt(this.form.amount.value,10)-10;">
</td></tr>
</table>
</td>
</tr>
</table>
</form>

Answer 4

Javascript интерпретирует значение текстового поля как строку. Вы можете использовать parseInt () чтобы превратить значение в число.

javascript:this.form.amount.value=parseInt(this.form.amount.value, 10)+10;

Answer 5

Вам необходимо ввести this.form.amount.value в Integer, иначе оно будет считаться строкой. Для этого используйте parseInt().

Answer 6

Код события onClick должен выглядеть следующим образом: javascript:this.form.amount.value=Number(this.form.amount.value)+10;

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