Question

我正在尝试增加和减少一个数字，如果用户在文本框中给出是15，它应该在单击按钮时递增，并在按钮单击时递减...

这是我的javascript代码

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">

    function incNumber() {
        for(i=1;i>0;i++){
        document.getElementById("display").value=i;
    }
    }

    function decNumber() {
        for(i=1;i>0;i--){
        document.getElementById("display").value=i;
    }
    }
    </script>
</head>
<body>
<form>
    <input type="text" value="0"/>
    <input type="button" value="Increase" id="inc" onclick="incNumber()"/>
    <input type="button" value="Decrease" id="dec" onclick="decNumber()"/>

    <label id="display"></label>
</form>
</body>
</html>

Answer 1

使用function incNumber(){ var c = parseInt(document.getElementsByTagName("input")[0].value); c++; document.getElementsByTagName("input")[0].value = c; document.getElementById("display").innerHTML = c; }函数将值从字符串转换为整数。

decNumber()

逻辑代表function decNumber(){ var c = parseInt(document.getElementsByTagName("input")[0].value); c--; document.getElementsByTagName("input")[0].value = c; document.getElementById("display").innerHTML = c; }

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>




 <style>
    .flex-container {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
    }

    .flex-item {
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
 </style>

Answer 2

很少有建议 1.永远不要将你的标记与javascript混淆。考虑在javascript结束时附加事件点击/更改

DOM搜索成本高昂。谨慎使用它 3.使用parseInt（variablename，10） - ＆gt;将其转换为整数

检查以下代码段

＆＃13;

window.onload=function(){
  var incButton=document.getElementById("inc");
  incButton.addEventListener("click",incNumber);
  var decButton=document.getElementById("dec");
  decButton.addEventListener("click",decNumber);
}
function incNumber() {
          var displayValue= document.getElementById("display");
  var text=document.getElementById("input");
  var value=parseInt(text.value,10);
  
  if(value==15){
       displayValue.innerHTML=value+1;
  }
}
    

    function decNumber() {
      var displayValue= document.getElementById("display");
  var text=document.getElementById("input");
  var value=parseInt(text.value,10);
        displayValue.innerHTML=value-1;
  
   }

＆＃13;

<form>
    <input type="text" value="0" id="input"/>
    <input type="button" value="Increase" id="inc" />
    <input type="button" value="Decrease" id="dec" />

    <label id="display"></label>
</form>

＆＃13;

希望这有帮助

Answer 3

如果您想通过输入值递增标签值，请尝试此

function incNumber(){
     var num=0;
     if(isNaN(document.getElementById('diplay').innerHTML)){
          num=$("#inputVal").val();
     }
     else{
          num=parseInt(document.getElementById('diplay').innerHTML)+$("#inputVal").val();
     }
     document.getElementById('diplay').innerHTML=num;
}

 function decNumber(){
     var num=0;
     if(isNaN(document.getElementById('diplay').innerHTML)){
          num=$("#inputVal").val();
     }
     else{
          num=parseInt(document.getElementById('diplay').innerHTML)-$("#inputVal").val();
     }
     document.getElementById('diplay').innerHTML=num;
}

在HTML中

<form>
<input type="number" id="inputVal" value="0"/>
<input type="button" value="Increase" id="inc" onclick="incNumber()"/>
<input type="button" value="Decrease" id="dec" onclick="decNumber()"/>

<label id="display"></label>

Answer 4

或者您可以将输入类型定义为数字

<input type="number" id="numbrfield"/>

当您将鼠标悬停在该字段上时，您将自动获得递增或递减按钮。

如何使用javascript增加和减少文本框值？

4 个答案: