如何使用两个按钮增加和减少文本值答案

【问题标题】：How to increase and decrease a text value with two buttons如何使用两个按钮增加和减少文本值
【发布时间】：2015-04-27 09:20:19
【问题描述】：

我正在尝试使用两个按钮来增加文本值，一个在文本的每一侧，将值增加 10 或减少 10，并且值不能低于 10 公里或超过 90 公里。

这是应用程序屏幕，因此您可以了解我的意思：

更新：我现在得到了可以使用的代码，但它在数字后面没有“km”值，所以它是 10、20、30 而不是 10 公里、20 公里、30 公里。有谁知道如何调整这段代码来做我想做的事？

<script language='javascript' type='text/javascript'>
$(document).ready(function(){

$("#increment").click(function(){
if($('#number').val() !="90"){
var $n = $("#number");
$n.val(Number($n.val())+10);
}
}); 

$("#decrement").click(function(){
if($('#number').val() !="10"){
var $n = $("#number");
$n.val(Number($n.val())-10);
    }
});

});
</script>
</head>
<style>
.Radius{
font-size:14px;
font-family:"gillsans";
color: #4361AD;  
text-align: center;
}
</style>
<body>
<div id="Maincontainer">
<input type="text" value="10" id="number" class="Radius" style="background-color:transparent; border:0px solid white; width:110px;     margin-left:15px;"/>
<input type="button" id="increment" value="Increment"/>
<input type="button" id="decrement" value="decrement"/>
</div>
</body>

https://jsfiddle.net/deepanv29/4b7adopb/

【问题讨论】：

您能分享一下您目前拥有的任何代码吗？
你卡在哪一部分了？
到目前为止有什么努力吗？还是只是另一个“请为我写代码”的请求？
您是否只想更改值以根据值放大缩小地图
抱歉没有代码，我还在学习。我只能自己做一些非常基本的事情。

标签： javascript c# html css

【解决方案1】：

<!DOCTYPE>
<html>
<head>
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
  <div>
<body>
  <input type="text" value="10Km" id="number"/>
  <input type="hidden" value="10" id="number1"/>
  <input type="button" id="increment" value="Increment"/>
  <input type="button" id="decrement" value="decrement"/>
</body>
</div>

<script language='javascript' type='text/javascript'>
  $(document).ready(function(){
    $("#increment").click(function(){
      if($('#number1').val() !="90"){
        var $n = $("#number1");
        $n.val(Number($n.val())+10);
        var value = $n.val();
        $("#number").val(value +'Km');
       }
    }); 

    $("#decrement").click(function(){
      if($('#number1').val() !="10"){
        var $n = $("#number1");
        $n.val(Number($n.val())-10);
        var value = $n.val();
        $("#number").val(value +'Km');
      }
    });
  });
</script>
</body>
</html>

updates Js fiddle demo for the above code

【讨论】：

感谢 bud，我看到它在 jsfiddle 中有效，但是当我将它与标签中的 javascript 粘贴到输入标签正下方时，它不起作用。这是脚本标签应该去的吗？问这些问题时，我感觉自己像个新手。
代码帮助了你真好。你很快就会这样编码。祝你玩得开心。
嗨马库斯我已经更新了 js fiddle 代码和上面的代码。检查它正在工作的更改。我忙于另一项工作，所以我才更新这么晚。
非常感谢再次。你一点也不迟到:)。

【解决方案2】：

您只需要在按钮单击时增加和减少值。

int value = 10;

protected void BtnIncre_Click(Object sender, EventArgs e)
{
    if (value < 90) 
    {
        value += 10;
        Session["Value"] = value;
    }
} 

protected void BtnDecre_Click(Object sender, EventArgs e)
{
    if (value > 10)
    {
        value -= 10;
        Session["Value"] = value;
     }
}

【讨论】：

代码应该是 if(value
非常感谢 Alex 和 Rufus，我会看看能不能让它工作。将其链接到按钮本身可能会遇到麻烦......但我会让你知道我是怎么做的。

【解决方案3】：

<!DOCTYPE>
<html>
<head>
</head>
<body>
    <input type="button" id="dec" value="DEC" onclick="dec();">
    <input type="text" id="Number_value" value="0" readonly>
    <input type="button" id="inc" value="INC" onclick="inc();">
    <script language='javascript' type='text/javascript'>
        function inc()
        {
            var val = parseInt(document.getElementById('Number_value').value);  
            val+=10;
            if(val>90) val = 90;
            document.getElementById('Number_value').value = val;
        }
        function dec()
        {
            var val = parseInt(document.getElementById('Number_value').value);  
            val-=10;
            if(va<10) val = 10;
            document.getElementById('Number_value').value = val;
        }
    </script>
</body>
</html>

【讨论】：

你甚至向我展示了如何制作按钮，谢谢老兄。我会看看两者中哪一个效果最好。
我注意到这个值高于 90 低于 10，有没有简单的方法来解决这个问题？
感谢您的意见，但我决定使用 Deepan Venkatesh 代码:)。