call 2 functions onClick event

Question

I have a text field with PLUS + button to increase textfield value, at the same time i want the limit of (0 - 100). I dont want any one increase value more then 100 or less then 0.

I try below code which only work for add function

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

And is it possible to increase value by 5 ie instead of value++ can we use value+5 (i try it but not working)

Answer 1

You could simply change your code to only call one function (combine the add() and limit() ) like this:

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

And then just call add() :

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

Additionally, you could make it more dynamic and send in the value to add as a parameter:

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

And then call it like this:

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

This way you can have more buttons with different values:

<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

if you call the add function now, it will increment your value by 5 this will only be done if your current value is under 200 and over 10

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

with this solution, there is no need for a second function (eg limit)

Answer 4

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

Answer 5

Do simply this

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

Yes you can increase by 5. Just do this:

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

Answer 6

the simple solution to ur case is to use only one function that does everything u want... hope it will help u :)

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.
}