How to increase the counter value when clicking the button in java script

Question

I am new to java script i am doing one event that is when i clicking the plus button the css style was printed but value not increase. and same as clicking menus button the last child is not removed...

i want to print the css style and incremented value and same decrease value and delete the last child........

below is my html

    var counter = 0;
    var numBoxes = 10;
    function myFun(showDiv) {
           var ele = document.getElementById(showDiv + counter);
           if(counter>numBoxes) {
                  document.getElementById("incBtn").addEventListener("click", function(){
    				document.getElementById("demo").innerHTML = "Limit Is Over";
    			});
           }
           else {
                  ele.style.display = "block";
           }
           if(counter>0) {
                 ele.style.display = "block"; 
           }
           else {
                  document.getElementById("decBtn").addEventListener("click", function(){
    				document.getElementById("demo").innerHTML = "Limit Is Over";
    			});
           }
    }

<div class="divInfo">
    		<span id="box1" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;"></span>
    		<span id="box2" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
    		<span id="box3" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
    		<span id="box4" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
    		<span id="box5" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
    		<span id="box6" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
    		<span id="box7" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
    		<span id="box8" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
    		<span id="box9" style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
    		<span id="box10"style="border: 1px solid black; background: #CCCCCC; display: none;padding: 2px;height:90px;width:10px;float:left;margin-left:10px;"></span>
    	</div>
    	<div class="divInfo2">
    		<input type="text" id="value" value="0">
    	</div>
    	<div class="IncDrc">
    		<input id="incBtn" type="button" value="+" onclick="counter++; myFun('box');">
    		<input id="decBtn" type="button" value="-" onclick="counter--; myFun('box');">
    	</div>
    	<div>
    		<p id="demo"></p>
    	</div>

Lalit · Accepted Answer · 2017-11-14 10:30:49Z

1

I have passed an extra parameter for the operation that you want to perform. Based on its value you can execute the code as you want.

Update 1 :-

Removed the static spans from div "divInfo".
We are adding span dynamically when user clicks on plus button.
We are removing last child from div "divInfo" when user click on minus button.

var counter = 0;
    var numBoxes = 10;
    function myFun(showDiv,operation) {
            var containerElement =  document.getElementById("container");
            if(operation == "increment"){
            if(counter >= numBoxes){
              document.getElementById("demo").innerHTML = "Limit Is Over";
              return;
            }
            else{
              document.getElementById("demo").innerHTML = "";
            }
              counter++;
              var spn = document.createElement("span");
            spn.id = "box"+counter;
            spn.style = "border: 1px solid black; background: #CCCCCC; padding: 2px;height:90px;width:10px;float:left;";
           containerElement.appendChild(spn);
            }
            else if(operation == "decrement"){
            document.getElementById("demo").innerHTML = "";
              if(counter == 0){
                return;
              }
              containerElement.removeChild(containerElement.lastChild);
              counter--;  
            }
            
            var inputBox = document.getElementById("value");
            inputBox.value = counter;
            
           /*
           if(counter>numBoxes) {
                  document.getElementById("incBtn").addEventListener("click", function(){
    				document.getElementById("demo").innerHTML = "Limit Is Over";
    			});
           }
           else {
                  
           }
           if(counter>0) {
                 ele.style.display = "block"; 
           }
           else {
                  document.getElementById("decBtn").addEventListener("click", function(){
    				document.getElementById("demo").innerHTML = "Limit Is Over";
    			});
          
           }*/
    }

<div class="divInfo" id="container">
    		
    	</div>
    	<div class="divInfo2">
    		<input type="text" id="value" value="0">
    	</div>
    	<div class="IncDrc">
    		<input id="incBtn" type="button" value="+" onclick="myFun('box','increment');">
    		<input id="decBtn" type="button" value="-" onclick="myFun('box','decrement');">
    	</div>
    	<div>
    		<p id="demo"></p>
    	</div>

edited Nov 14, 2017 at 10:30

answered Nov 14, 2017 at 7:28

Lalit

1,3691 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Babu Over a year ago

when clicking the menus button my style is not deleted

Lalit Over a year ago

You will have to add code for that inside if condition of decrement operation

Lalit Over a year ago

See the updated code. I have commented some of your code. You can modify it according to your need

Babu Over a year ago

i have one doubt @Lalit i taken numBoxes = 25; aften 10 will not printing why?

Lalit Over a year ago

Because you have statically added those boxes. See span with id "id="box1" inside div "divInfo". Instead you should generate them dynamically by using javascript. Then it will work perfectly.

|

Nisal Edu · Accepted Answer · 2017-11-14 07:16:36Z

0

Something like this ?

var count = 0;

function myFunction(){

  count++;
  console.log(count)

}

<button onclick="myFunction()">click</button>

answered Nov 14, 2017 at 7:16

Nisal Edu

7,6294 gold badges32 silver badges38 bronze badges

1 Comment

Babu Over a year ago

but at time my style is also printed with counter increase

bobharley · Accepted Answer · 2017-11-14 07:22:32Z

0

You can pass the action as an argument to your function

var count = 0;
function myFunction(action, div) {
  if(action == 'add') {
    count++;
  else {
    count--;
  }
  // do something else
}

then on your html

<button type="button" onclick="myFunction('add', 'box')">+</button>
<button type="button" onclick="myFunction('sub', 'box')">-</button>

answered Nov 14, 2017 at 7:22

bobharley

7023 silver badges19 bronze badges

Comments

Paras Wadhwa · Accepted Answer · 2017-11-14 07:35:20Z

Here is your modified function to obtain the desired results.

    <div class="divInfo2">
        <input type="text" id="value" value="0">
    </div>
    <div class="IncDrc">
        <input id="incBtn" type="button" value="+" onclick="myFun('inc','box');">
        <input id="decBtn" type="button" value="-" onclick="myFun('dec','box');">
    </div>
    <div>
        <p id="demo"></p>
    </div>

Your javascript code will be like this-

 var counter = 0;
 var numBoxes = 10;

 function myFun(task, showDiv) {
     if (task == 'inc') {
         counter++;
     } else if (task == 'dec') {
         counter--;
     }

     var ele = document.getElementById(showDiv + counter);
     if (counter > numBoxes) {
         document.getElementById("incBtn").addEventListener("click", function() {
             document.getElementById("demo").innerHTML = "Limit Is Over";
         });
     } else {
         ele.style.display = "block";
     }
     if (counter > 0) {
         ele.style.display = "block";
     } else {
         document.getElementById("decBtn").addEventListener("click", function() {
             document.getElementById("demo").innerHTML = "Limit Is Over";
         });
     }
 }

A. Ferrari · Accepted Answer · 2017-11-14 08:05:51Z

You can try something like this:

var counter = 0;
var numBoxes = 10;
function myFun(action, showDiv) {
    if (action == 'add') {
        counter++;
    }else{
        counter--;
    }
    if (counter > 0 && counter > numBoxes) {

         document.getElementById("demo").innerHTML = "Limit Is Over";

    }
    else {
        if (counter > 0) {

            if (action == 'sub' && ((counter + 1) > 0)) {
                var lastEle = document.getElementById(showDiv + 
                   (counter + 1));
                lastEle.style.display = "none";
            } else {
                var ele = document.getElementById(showDiv + counter);
                ele.style.display = "block";
            }
            var inputValue =  
                 document.getElementById("value").setAttribute('value', counter);

        }
        else {

            document.getElementById("demo").innerHTML = "Limit Is Over";

        }
    }

}

And in HTML

<input id="incBtn" type="button" value="+" onclick="myFun('add','box');">
<input id="decBtn" type="button" value="-" onclick="myFun('sub','box');">

Collectives™ on Stack Overflow

How to increase the counter value when clicking the button in java script

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related