Question

我想要实现的是拥有一个值为0或空白的文本框，以及一个能够输入数字的用户。然后我希望两个按钮（一个+和一个 - ）每个onclick增加和减少文本框的值50。

这是我体内的html：

<input id="decreaseNumber" type="button" value="-">
<input id="textBox" type="text" value="0">
<input id="increaseNumber" type="button" value="+">

javascript：

function increaseNumber(){
var increase = 50;
document.getElementById("textBox").value = increase;}

Answer 1

decreaseNumber.onclick = function() {
   textBox.value = parseInt(textBox.value) -50
}
increaseNumber.onclick = function() {
   textBox.value = parseInt(textBox.value) + 50
}

此外，您可以使用原生html5功能http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

Answer 2

只需将点击事件和功能附加到输入。

DEMO http://jsfiddle.net/Dfprp/561/

非常基本的例子

function increaseValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value = value + 50;
    document.getElementById('number').value = value;
}
function reduceValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value = value - 50;
    document.getElementById('number').value = value;
}

Answer 3

这是DEMO

您可以根据按下的按钮ID

简单地取值和增加/减少

var a = document.querySelectorAll('input[type=button]');

for (var i = 0; i<a.length; i++) {
 a[i].addEventListener('click', addorsub);   
}

function addorsub () {
    var b = document.getElementById('textBox');

    if (this.id == 'decreaseNumber') {
    b.value = parseInt(b.value) - 50;
    }

    else if (this.id == 'increaseNumber') {
    b.value = parseInt(b.value) + 50;                                      
    }
}

Answer 4

以下是使用Javascript / jQuery的方法：

var value = $("#textBox").val();

$("#decreaseNumber").click(function(){
  value -= 50;
   $("#textBox").val(value);
});

$("#increaseNumber").click(function(){
   value += 50;
   $("#textBox").val(value);
});

我还建议将输入类型更改为数字：

<input id="textBox" type="number" value="0">

var value = $("#textBox").val();

$("#decreaseNumber").click(function() {
  value -= 50;
  $("#textBox").val(value);
});

$("#increaseNumber").click(function() {
  value += 50;
  $("#textBox").val(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="decreaseNumber" type="button" value="-">
<input id="textBox" type="number" value="0">
<input id="increaseNumber" type="button" value="+">

Answer 5

为什么不简单地使用html

<input type="number" step="50" value="0">

还添加 min 和 max 属性，用于设置可以转到的最小数量，反之亦然

使用javascript和按钮将整数增加/减少50

5 个答案: