使用javascript和按钮将整数增加/减少50 [关闭]答案

【问题标题】：Increase/decrease integer by 50 with javascript and buttons [closed]使用javascript和按钮将整数增加/减少50 [关闭]
【发布时间】：2014-12-19 20:39:04
【问题描述】：

我想要实现的是拥有一个值为 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;}

【问题讨论】：

您忘记发布您尝试过的 JavaScript。
我感觉某个地方有问题，但我找不到。请参考How to Ask 页面来帮助你制定一个（稍微好一点的）问题
1.将事件处理程序添加到按钮 2。在两个事件处理程序中，获取 textBox 的值 3.根据按下的按钮增加或减少值 4.为 textBox 设置新值 5.利润
是的，忘记了我的 javascript，我不确定如何从这里开始
这就是你的全部吗？你想增加/减少50，为什么你有1000？

标签： javascript html button onclick

【解决方案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

【讨论】：

这个问题不要求jQuery，所以你不应该在你的答案中使用它。

【解决方案2】：

只需将点击事件和函数附加到输入。

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

【讨论】：

【解决方案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;                                      
    }
}

【讨论】：

【解决方案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="+">

【讨论】：

【解决方案5】：

为什么不简单地使用 html

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

还添加 min 和 max 属性以设置它可以达到的最小数字，反之亦然

【讨论】：