HTML, Javascript Multiple button that works independently

Question

I am trying to create a web server that has multiple buttons that control the quantity (plus and minus). If I have 3 sets of plus buttons, minus buttons and text, it should not interfere with each other when I press on a certain set. How do I achieve this?

The code I wrote is:

var count=0;
var quantity = document.getElementById("quantity");
function plus(){
    count++;
    quantity.value = count;
}
function minus(){
    if (count > 0) {
    	count--;
    	quantity.value = count;
    }
}

.card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      padding: 16px;
      text-align: center;
      background-color: #f1f1f1;
      max-width: 200px;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    .row {margin: 0 -5px;}
    .column {
      float: left;
      width: 15%;
      padding: 0 10px;
    }
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
        display: block;
        margin-bottom: 20px;
      }
    }

    <!DOCTYPE html>
    <html lang="en" >
    <head>
    <title>My Page</title>
    <meta charset="utf-8">
    </head>
    <body>
    <div class="row">
    	<div class="column">
    		<div class="card">
    			<p><b>Item 1</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus()"/>
    			<input type='text' id='quantity' value='0' style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus()"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 2</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus()"/>
    			<input type='text' id='quantity' value='0' style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus()"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 3</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus()"/>
    			<input type='text' id='quantity' value='0'  style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus()"/></p>
    		</div>
    	</div>		
    </div>	
    </body>
    </html>

you should really learn about arrays. Ideally, you have an array of items and the minus and plus functions get the array index of the element they must modify — user5328504
– user5328504, Commented Oct 24, 2019 at 13:39
You have 3 elements with the ids: 'qtyminus', 'quantity' and 'qtyplus'. IDs must be unique in an HTML-document — Mischa
– Mischa, Commented Oct 24, 2019 at 13:41

Jonny · Accepted Answer · 2019-10-24 14:01:53Z

You are almost there, but you've given each input the same ID (Id's should be unique). So for each input change the id to be something unique.

You can then alter the javascript function to include the 'getElementById' inside the function and pass it as a variable, you will also need to change count var to be the value of the input field, like this:

function plus(idname){
    var quantity = document.getElementById(idname);
    let val = quantity.value;
    val++;
    quantity.value = val;
}

function minus(idname){
    var quantity = document.getElementById(idname);
    let val = quantity.value;

    if (val > 0) {
        val--;
        quantity.value = val;
    }
}

Input example with unique id and passing the id name as a parameter to the function:

<input type='button' value='-' id="qtyminus" onclick="minus('quantityA')"/>
<input type='text' id='quantityA' value='0' style="width: 40px;" />
<input type='button' value='+' id="qtyplus" onclick="plus('quantityA')"/>

Name the other input fields ids as 'quantityB' etc....

This will then apply the +/- only to the input field that you pass in to the js function using the id as a parameter.

I have tested this and it works. You can condense this code even further, but this gets you a working example to go on with.

function plus(idname){
    var quantity = document.getElementById(idname);
    let val = quantity.value;
    val++;
    quantity.value = val;
}
function minus(idname){
    var quantity = document.getElementById(idname);
    let val = quantity.value;

    if (val > 0) {
    	val--;
    	quantity.value = val;
    }
}

<!DOCTYPE html>
    <html lang="en" >
    <head>
    <title>My Page</title>
    <meta charset="utf-8">
    </head>
    <body>
    <div class="row">
    	<div class="column">
    		<div class="card">
    			<p><b>Item 1</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus('quantityA')"/>
    			<input type='text' id='quantityA' value='0' style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus('quantityA')"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 2</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus('quantityB')"/>
    			<input type='text' id='quantityB' value='0' style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus('quantityB')"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 3</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus('quantityC')"/>
    			<input type='text' id='quantityC' value='0'  style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus('quantityC')"/></p>
    		</div>
    	</div>		
    </div>	
    </body>
    </html>

Thank you so much! I was troubled and stuck on this for a few hours!
No worries, glad it was of help :) Thanks for giving the vote

Prawin soni · Accepted Answer · 2019-10-24 14:09:36Z

Get the relative input for current clicked plus/minus button and then do the operation, added snippet:

function plus(e){
    var quantity = e.parentElement.querySelector("#quantity");
    var count = parseInt(quantity.value || 0)
    count++;
    quantity.value = count;
}
function minus(e){
    var quantity = e.parentElement.querySelector("#quantity");
    var count = parseInt(quantity.value || 0)
    if (count > 0) {
    	count--;
    	quantity.value = count;
    }
}

.card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      padding: 16px;
      text-align: center;
      background-color: #f1f1f1;
      max-width: 200px;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    .row {margin: 0 -5px;}
    .column {
      float: left;
      width: 15%;
      padding: 0 10px;
    }
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
        display: block;
        margin-bottom: 20px;
      }
    }

<!DOCTYPE html>
    <html lang="en" >
    <head>
    <title>My Page</title>
    <meta charset="utf-8">
    </head>
    <body>
    <div class="row">
    	<div class="column">
    		<div class="card">
    			<p><b>Item 1</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus(this)"/>
    			<input type='text' id='quantity' value='0' style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus(this)"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 2</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus(this)"/>
    			<input type='text' id='quantity' value='0' style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus(this)"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 3</b></p>
    			<p><input type='button' value='-' id="qtyminus" onclick="minus()"/>
    			<input type='text' id='quantity' value='0'  style="width: 40px;" />
    			<input type='button' value='+' id="qtyplus" onclick="plus()"/></p>
    		</div>
    	</div>		
    </div>	
    </body>
    </html>

Ivan Karaman · Accepted Answer · 2019-10-24 14:48:18Z

My version of the solution. Input element should have class quantity, plus button qtyplus class, minus button qtyminus class, you don't have to generate unique id's...

function plus(qty){
    qty.value++;
}
function minus(qty){
    if (qty.value > 0) {
    	qty.value--;
    }
}

function quantity() {
  var qtyInstances = document.getElementsByClassName("quantity");
  Array.prototype.forEach.call(qtyInstances, function(el) {
    const wrap = el.parentElement;
    
    const plusBtn = wrap.querySelector('.qtyplus');
    const minusBtn = wrap.querySelector('.qtyminus');
    
    plusBtn.addEventListener('click', plus.bind(null, el));
    minusBtn.addEventListener('click', minus.bind(null, el));
  });
}

quantity();

.card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      padding: 16px;
      text-align: center;
      background-color: #f1f1f1;
      max-width: 200px;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    .row {margin: 0 -5px;}
    .column {
      float: left;
      width: 15%;
      padding: 0 10px;
    }
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
        display: block;
        margin-bottom: 20px;
      }
    }

<!DOCTYPE html>
    <html lang="en" >
    <head>
    <title>My Page</title>
    <meta charset="utf-8">
    </head>
    <body>
    <div class="row">
    	<div class="column">
    		<div class="card">
    			<p><b>Item 1</b></p>
    			<p><input type='button' value='-' class="qtyminus"/>
    			<input class='quantity' type='text' id='quantity1' value='0' style="width: 40px;" />
    			<input type='button' value='+' class="qtyplus"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 2</b></p>
    			<p><input type='button' value='-' class="qtyminus"/>
    			<input class='quantity' type='text' id='quantity2' value='0' style="width: 40px;" />
    			<input type='button' value='+' class="qtyplus"/></p>
    		</div>
    	</div>
    			
    	<div class="column">
    		<div class="card">
    			<p><b>Item 3</b></p>
    			<p><input type='button' value='-' class="qtyminus"/>
    			<input class='quantity' type='text' id='quantity3' value='0'  style="width: 40px;" />
    			<input type='button' value='+' class="qtyplus"/></p>
    		</div>
    	</div>		
    </div>	
    </body>
    </html>

Collectives™ on Stack Overflow

HTML, Javascript Multiple button that works independently

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related