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

标签 javascript c# html css

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

这是应用程序屏幕,您可以明白我的意思:

enter image description here

更新:我现在已经获得了可使用的代码,但它在数字后没有“km”值,因此它变为 10、20、30 而不是 10km、20km、30km。有谁知道如何调整这段代码来做我想做的事?

<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/

最佳答案

<!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

关于javascript - 如何使用两个按钮增加和减少文本值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29891666/

相关文章:

javascript - HTML5 Canvas 调用同一个函数两次?

html - 如何让这个汉堡抽屉菜单向右滑动?

javascript - 如何将 php 值从当前页面传递到弹出页面(外部)

javascript - 如何在 yii2 中使用 php jquery?

javascript - 如何在点击函数中显示当前循环迭代,javascript

c# - 为什么 IsKnownColor 不能识别所有颜色?

c# - 没有在统一的实时回合制游戏中获得应用程序扭曲

Javascript 滚动底部

javascript - FabricJS:当我更改路径坐标时,路径的边界框不会更新

c# - 如何将字符串拆分为包含前一个最后一个字符的两个字符的字符串数组?