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

Increase/decrease integer by 50 with javascript and buttons

本文关键字：增加 减少 整数 javascript 按钮 使用      更新时间：2023-09-26

我想要实现的是拥有一个值为 0 或空白的文本框，并且用户能够输入一个数字。然后我希望两个按钮(一个 + 和一个 -(每次点击时将文本框的值增加和减少 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;}

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

只需将单击事件和函数附加到输入即可。

演示 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;
}

这是一个演示

您可以简单地取值并根据按下的按钮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;                                      
    }
}
以下是

使用 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="+">

为什么不简单地使用 html

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

还要添加最小值和最大值属性，用于设置它可以转到的最小值，反之亦然

相关文章：