Question

我有一个带有PLUS +按钮的文本字段来增加文本字段值，同时我希望限制为（0 - 100）。我不希望任何一个增加值超过100或者小于0。

我尝试下面只适用于添加功能的代码

<script type="text/javascript">
function add(){
document.getElementById("name").value++;
}
function limit(){
document.getElementById('name').value;
      if(this.value > 200){
           this.value = 200;
      }
      if(this.value < 10){
           this.value = 10;
      }
}
</script>

<form name="quiz" >
<input type='text' name='name' id='name'/>
<input type='button' name='plus' onclick="add();limit();" value='+'/>
</form>

是否有可能将值增加5，而不是值++我们可以使用值+ 5（我尝试但不工作）

Answer 1

您只需将代码更改为仅调用一个函数（合并add()和limit()），如下所示：

<script type="text/javascript">
    function add() {
        var name = document.getElementById("name"); // Get the input (store in local var).
        var value = parseInt(name.value) + 5; // Store the new value locally.

         if(value > 100){
              value = 100;
         }
         else if(value < 10){
              value = 10;
         }

         name.value = value; // Set the new value.
    }
</script>

然后只需致电add()：

<input type='text' name='name' id='name' value="0"/>
<input type='button' name='plus' onclick="add();" value='+'/>

此外，您可以使其更具动态性并发送值作为参数添加：

function add(numberToAdd) {
    var name = document.getElementById("name");
    var value = parseInt(name.value) + numberToAdd; // Use the parameter
    ....

然后像这样称呼它：

<input type='button' name='plus' onclick="add(5);" value='+'/>

通过这种方式，您可以拥有更多具有不同值的按钮：

<input type='button' name='plus1' onclick="add(1);" value='+1'/> <!-- Will add +1 -->
<input type='button' name='plus2' onclick="add(2);" value='+2'/> <!-- Will add +2 -->
<input type='button' name='plus3' onclick="add(3);" value='+3'/> <!-- Will add +3 -->

Answer 2

    function add(){
x=document.getElementById("name").value;
x=Number(x);
x=x+5
document.getElementById("name").value=x;
}

    function limit(){
x=document.getElementById("name").value;
x=Number(x);
      if(x > 100){
           document.getElementById("name").value = 100;
      }
      if(x < 50){
           document.getElementById("name").value = 0;
      }

Answer 3

如果你现在调用add函数，它会将你的值增加5 只有当你的当前值低于200且超过10

时才会这样做

function add() {
    var val = document.getElementById("name").value;
    if(val < 200 && val > 10) {
        document.getElementById("name").value += 5;
    }
}

使用此解决方案，不需要第二个功能（例如限制）

Answer 4

function add(howMuch){
  document.getElementById("name").value = document.getElementById("name").value+5;
}

Answer 5

只需这个

function add(){
document.getElementById("name").value++;
limit();
}

是的，你可以增加5。就这样做：

document.getElementById("name").value+=5;

Answer 6

你的案例的简单解决方案是只使用一个功能来完成你想要的一切......希望它能帮助你:)

function add() {
   var limit = document.getElementById("name").value();
   if (limit < 200 || limit > 0) {
     document.getElementById("name").value++;
     //or use this
     //document.getElementById("name").value = limit + 5;
   }
   else
     //anything here.
}

调用2个函数onClick事件

6 个答案: