CODEWITHSUNDEEP
javascripthtml
Lakshya
Lakshya

Reputation: 506

Increment and decrement

I want to make 2 buttons for both increment and decrement of value. So if I increase the value of var k = 4 and I press the decrement button it it decreases the value of 4 to 3

I tried this

var k = 1;

function qtrFunction(k, v) {
  document.getElementById('qtrrr').innerHTML = k;
  k++;
  document.getElementById('qtrrr').innerHTML = v;
  v--;
}
v = k;
console.log(k);
<div style="color:white; font-size:70px;">QTR <span id="qtrrr" style="color:green; border-radius:10px; padding:5px 20px 5px 20px;">0</span>
</div>


<button onclick="qtrFunction(k)" style="padding:15px">Increase Quart</button>
<button onclick="qtrFunction(v)" style="padding:15px">Decrease Quart</button>

Upvotes: 2

Views: 997

Answers (7)

PAVAN KUMAR
PAVAN KUMAR

Reputation: 11

This Code May be Helpful for you

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <script type="text/javascript">
        var value = 0; // initialize a global variable

        function incrementAndDisplay() {
        value++;
       alert(value);
        document.getElementById('qtrrr').textContent = value;

        }
       function decrementAndDisplay() {
        value--;
       alert(value);
        document.getElementById('qtrrr').textContent = value;

        }

        console.log(value);


   </script>
</head>
<body>
<button onclick="incrementAndDisplay()" style="padding:15px">Increase Quart</button>
<button onclick="decrementAndDisplay()" style="padding:15px">Decrease Quart</button>
</body>
</html>

Upvotes: 0

LeoK
LeoK

Reputation: 51

you can do the following:

Just pass the action ( incr or decr) when you are calling the js function and then get the current value and depending on the button pressed incr or decr the value. After that just set it back.

function qtrFunction(action) {
  var value = document.getElementById("qtrrr").innerHTML;
  if (action == "incr") {
    value++;
  } else {
    value--;
  }
  document.getElementById("qtrrr").innerHTML = value;
}
<div style="color:white; font-size:70px;">QTR <span id="qtrrr" style="color:green; border-radius:10px; padding:5px 20px 5px 20px;">0</span>
</div>


<button onclick="qtrFunction('incr')" style="padding:15px">Increase Quart</button>
<button onclick="qtrFunction('decr')" style="padding:15px">Decrease Quart</button>

Upvotes: 0

Tornike Shavishvili
Tornike Shavishvili

Reputation: 1354

This should be helpful:

var sampleVar = 0;

document.getElementById('qtrrr').innerHTML = sampleVar;

function stepping(step) {
  sampleVar += step;
  document.getElementById('qtrrr').innerHTML = sampleVar;
}
<div style="color:white; font-size:70px;">
  QTR <span id="qtrrr" style="color:green; border-radius:10px; padding:5px 20px 5px 20px;"></span>
</div>

<button onclick="stepping(1)" style="padding:15px">Increase Quart</button>
<button onclick="stepping(-1)" style="padding:15px">Decrease Quart</button>

Upvotes: 0

Satish Kumar sonker
Satish Kumar sonker

Reputation: 1288

var k = 1;
    function qtrFunction(condition) {
        document.getElementById('qtrrr').innerHTML= condition?k++:k--;
    } 

<button onclick="qtrFunction(true)" style="padding:15px">Increase Quart</button>
<button onclick="qtrFunction(false)" style="padding:15px">Decrease Quart</button>

Upvotes: 0

PHPExpert
PHPExpert

Reputation: 943

Try this. It might help you.

var cnt = 0;
function qtrFunction(val) {
  if(val=='k'){
    cnt = document.getElementById('qtrrr').innerHTML = (cnt+1);	        
  }else {
    cnt = document.getElementById('qtrrr').innerHTML = (cnt-1);
  }
}
<div style="color:white; font-size:70px;">QTR  <span id="qtrrr" style="color:green; border-radius:10px; padding:5px 20px 5px 20px;">0</span></div>
		
		
<button onclick="qtrFunction('k')" style="padding:15px">Increase Quart</button>
<button onclick="qtrFunction('v')" style="padding:15px">Decrease Quart</button>

Upvotes: 0

Moumit
Moumit

Reputation: 9630

Javascript

<script>
    var k = 1;
    function qtrFunction(V) {
        if(V=="I")
        {
          k++;
        }
        else
        {
          k--;
        }
        document.getElementById('qtrrr').innerHTML = k;
        console.log(k); 
    }       

</script>

HTML

<div style="color:white; font-size:70px;">QTR  <span id="qtrrr" style="color:green; border-radius:10px; padding:5px 20px 5px 20px;">0</span></div>


<button onclick="qtrFunction('I')" style="padding:15px">Increase Quart</button>
<button onclick="qtrFunction('D')" style="padding:15px">Decrease Quart</button>

Upvotes: 2

Dai
Dai

Reputation: 155588

  • Avoid using innerHTML as it triggers a parse of the set value string, this is an expensive operation (though it is better than document.write). Consider setting .textContent instead.
  • You haven't declared the v local, so you'll get errors about undefined symbols.
  • You don't need two values.

Like so:

<script type="text/ecmascript">
    var value = 0; // initialize a global variable

    function updateAndDisplay(increment) {
        if( increment ) value++;
        else            value--;
        document.getElementById('qtrrr').textContent = value;
    }
</script>

<button onclick="updateAndDisplay(true)" style="padding:15px">Increase Quart</button>
<button onclick="updateAndDisplay(false)" style="padding:15px">Decrease Quart</button>

Upvotes: 5

Related Questions