Develop Reference

Increment/Decrement Counter for 3 Buttons?

I have three buttons like this on my site:
I'm trying to increment and decrement the counters but it's only working for two, the first works fine but the second is adding 2 to every increment and the third isn't working at all.
Here is the code:
$('.plus').on('click', function(e) {
var val = parseInt($(this).prev('input').val());
$(this).prev('input').val(val + 1);
console.log(val);
});
$('.minus').on('click', function(e) {
var val = parseInt($(this).next('input').val());
if (val !== 0) {
$(this).next('input').val(val - 1);
}
if (val == 0) {
$(this).next('input').val(1);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="quantitiy" for="Quantity-collection-template-new"></label>
<input class="minus minus1" type="button" value="-">
<input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input="">
<input class="plus plus1" type="button" value="+">
<label class="quantitiy" for="Quantity-collection-template-new"></label>
<input class="minus minus2" type="button" value="-">
<input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input="">
<input class="plus plus2" type="button" value="+">
<label class="quantitiy" for="Quantity-collection-template-new"></label>
<input class="minus minus3" type="button" value="-">
<input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input="">
<input class="plus plus3" type="button" value="+">

It's easier to answer this here.
You're using .plus1 and .plus2 but there's no .plus3 bindings on the website. Which is different from what you posted here, that's why is working, so, my advice is:
Just remove the duplicate and use the same logic here, try it again and let us know.
$('.plus').on('click', function(e) { // omitted });
$('.minus').on('click', function(e) { // omitted });
This is what you have right now on the website:
$('.plus1').on('click', function(e) {
var val = parseInt($(this).prev('input').val());
$(this).prev('input').val(val + 1);
});
$('.minus1').on('click', function(e) {
var val = parseInt($(this).next('input').val());
if (val !== 0) {
$(this).next('input').val(val - 1);
}
if (val == 0) {
$(this).next('input').val(1);
}
});
And another section;
$('.plus2').on('click', function(e) {
var val = parseInt($(this).prev('input').val());
$(this).prev('input').val(val + 1);
});
$('.minus2').on('click', function(e) {
var val = parseInt($(this).next('input').val());
if (val !== 0) {
$(this).next('input').val(val - 1);
}
if (val == 0) {
$(this).next('input').val(1);
}
});
A couple of suggestions;
Don't use the same id, create some logic to add at least an index for each id if they represent more or less the same thing. product-1 and product-2 and so on. Same Id is recipe for disaster and a no-no from the start.
Remember to update both id and for properties with unique identifiers.
minus/plus - index works.

I add the max value of three input numbers and it's worked but how to add the increment decrement button without losing the max value?

I need the addition of a three-element is 8, with click + and - button. But, I don't want that it will increase each element up to 8.
// Addtion of select items LINK - https://stackoverflow.com/questions/49644837/set-max-value-of-three-input-numbers-together
var max = 8;
var $inputs = $('input');
function sumInputs($inputs) {
var sum = 0;
$inputs.each(function() {
sum += parseInt($(this).val(), 0);
});
return sum;
}
$inputs.on('input', function(e) {
var $this = $(this);
var sum = sumInputs($inputs.not(function(i, el) {
return el === e.target;
}));
var value = parseInt($this.val(), 10) || 0;
if (sum + value > max) $this.val(max - sum);
});
//Increment Decrement value
function up(max) {
document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) + 1;
if (document.getElementById("myNumber").value >= parseInt(max)) {
document.getElementById("myNumber").value = max;
}
}
function down(min) {
document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) - 1;
if (document.getElementById("myNumber").value <= parseInt(min)) {
document.getElementById("myNumber").value = min;
}
}
function up2(max) {
document.getElementById("myNumber2").value = parseInt(document.getElementById("myNumber2").value) + 1;
if (document.getElementById("myNumber2").value >= parseInt(max)) {
document.getElementById("myNumber2").value = max;
}
}
function down2(min) {
document.getElementById("myNumber2").value = parseInt(document.getElementById("myNumber2").value) - 1;
if (document.getElementById("myNumber2").value <= parseInt(min)) {
document.getElementById("myNumber2").value = min;
}
}
function up3(max) {
document.getElementById("myNumber3").value = parseInt(document.getElementById("myNumber3").value) + 1;
if (document.getElementById("myNumber3").value >= parseInt(max)) {
document.getElementById("myNumber3").value = max;
}
}
function down3(min) {
document.getElementById("myNumber3").value = parseInt(document.getElementById("myNumber3").value) - 1;
if (document.getElementById("myNumber3").value <= parseInt(min)) {
document.getElementById("myNumber3").value = min;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="select-1">
<button type="submit" value="-" onclick=" down('0')" class="sub" id="">-</button>
<input type="number" id="myNumber" value="0" name="qty" max="8" min="0" step="1"/>
<button type="submit" value="+" onclick="up('8')" class="add">+</button>
</div>
<div class="select-2">
<button type="submit" value="-" onclick=" down2('0')" class="sub">-</button>
<input type="number" id="myNumber2" value="0" name="qty2" max="8" min="0" step="1"/>
<button type="submit" value="+" onclick="up2('8')" class="add">+</button>
</div>
<div class="select-3">
<button type="submit" value="-" onclick=" down3('0')" class="sub" id="">-</button>
<input type="number" id="myNumber3" value="0" name="qty3" max="8" min="0" step="1"/>
<button type="submit" value="+" onclick="up3('8')" class="add">+</button>
</div>
Currently, the max value is 8. I would like to get the max value with the + and - button as well.
How can I solve this with javascript or jquery?
Here, there is a link below I follow for increment and decrement.
https://stackoverflow.com/a/49645518/15412266

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<button type="submit" value="+" onclick="minusoperation(1)" class="minus">-</button>
<input type="number" class="numbers" id="number1" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
<button type="submit" value="+" onclick="plusoperation(1)" class="plus">+</button>
<button type="submit" value="+" onclick="minusoperation(2)" class="minus">-</button>
<input type="number" class="numbers" id="number2" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
<button type="submit" value="+" onclick="plusoperation(2)" class="plus">+</button>
<button type="submit" value="+" onclick="minusoperation(3)" class="minus">-</button>
<input type="number" class="numbers" id="number3" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
<button type="submit" value="+" onclick="plusoperation(3)" class="plus">+</button>
</div>
<script type="text/javascript">
function inputNumber(el)
{
var myElements = document.getElementsByClassName('numbers');
var sum = 0;
for (var i=0;i<myElements.length;i++) {
if(myElements[i].value)
sum = sum+parseInt(myElements[i].value);
}
if(sum<=8)
{
el.dataset.prevvalue = el.value;
} else {
el.value = el.dataset.prevvalue;
}
}
function minusoperation(inputNumber)
{
var el = document.getElementById('number'+inputNumber);
if(parseInt(el.value))
{
el.value = parseInt(el.value)-1;
} else {
el.value = 0;
}
el.onchange();
}
function plusoperation(inputNumber)
{
var el = document.getElementById('number'+inputNumber);
if(parseInt(el.value))
{
el.value = parseInt(el.value)+1;
} else {
el.value = 1;
}
el.onchange();
}
</script>
</body>
</html>

How to change quantity with plus minus buttons with plain Javascript

let plus_btns = document.querySelectorAll('#plus-button');
let minus_btns = document.querySelectorAll('#minus-button');
let qty_inputs = document.querySelectorAll('#quantity');
plus_btns.forEach(btn=>{
btn.addEventListener('click', ()=>{
qty_inputs.forEach(qty=>{
qty.value++
})
})
})
minus_btns.forEach(btn=>{
btn.addEventListener('click', ()=>{
qty_inputs.forEach(qty=>{
if(qty.value > 1){
qty.value--
}
else{
qty.value=0;
}
})
})
})
<div class="cart-totals">
<input type="button" value="-" id="minus-button" for="quantity">
<input type="number" id="quantity" value="1" min="0">
<input type="button" value="+" id="plus-button" for="quantity">
<input type="button" value="-" id="minus-button" for="quantity">
<input type="number" id="quantity" value="1" min="0">
<input type="button" value="+" id="plus-button" for="quantity">
</div>
How I can change value of specific quantity input ???
In my case click event triggers all inputs and change the value of each input.
Please guide me thanks.

This should do the trick.
let plus_btns = document.querySelectorAll('#plus-button');
let minus_btns = document.querySelectorAll('#minus-button');
let qty_inputs = document.querySelectorAll('#quantity');
plus_btns.forEach(btn=>{
btn.addEventListener('click', ()=>{
btn.previousElementSibling.value++;
})
})
minus_btns.forEach(btn=>{
btn.addEventListener('click', ()=>{
btn.nextElementSibling.value = (btn.nextElementSibling.value == 0) ? 0 : btn.nextElementSibling.value - 1;
})
})

Use event delegation for a single generic document wide handler. Afaik for is not a valid attribute for input type 'button', so use a data-attribute. Furthermore: element id must be unique. Fixed all that in this demo snippet:
document.addEventListener("click", handle);
function handle(evt) {
if (evt.target.type === "button") {
return handleBtn(evt.target);
}
}
function handleBtn(btn) {
const elem = document.querySelector(`#${btn.dataset.for}`);
const nwValue = +elem.value + (btn.value === "-" ? -1 : 1);
elem.value = nwValue >= +elem.min ? nwValue : elem.min;
}
<div class="cart-totals">
<input type="button" value="-" data-for="quantity1">
<input type="number" id="quantity1" value="1" min="0">
<input type="button" value="+" data-for="quantity1">
<input type="button" value="-" data-for="quantity2">
<input type="number" id="quantity2" value="1" min="1">
<input type="button" value="+" data-for="quantity2">
</div>

Using a single event handler:
var cart = document.querySelector('.cart-totals');
cart.addEventListener('click', function(ev) {
var tgt = ev.target;
if (tgt.matches('input[type="button"]')) {
var input = document.getElementById(tgt.dataset.for);
var currentValue = +input.value;
var minValue = +input.min;
if (tgt.value === '+') {
input.value = currentValue + 1;
}
else if (currentValue > minValue) {
input.value = currentValue - 1;
}
}
});
<div class="cart-totals">
<input type="button" value="-" data-for="quantity1">
<input type="number" id="quantity1" value="1" min="0">
<input type="button" value="+" data-for="quantity1">
<input type="button" value="-" data-for="quantity2">
<input type="number" id="quantity2" value="5" min="2">
<input type="button" value="+" data-for="quantity2">
</div>

How to apply click event on respective div containing same child and class name

Two div having class name container containing same elements with same class name. Apply Jquery when that respective children are clicked.
HTML CODE
<div class="container">
<input type="button" class="negative" value="-">
<input type="button" class="qty" value="">
<span class="txt">None</span>
<input type="button" class="positive" value="+">
</div>
<div class="container">
<input type="button" class="negative" value="-">
<input type="button" class="qty" value="">
<span class="txt">None</span>
<input type="button" class="positive" value="+">
</div>
I have written Some scripts, which will hide negative input and display None when value is 0, positive input will increase a value
$(document).ready(function() {
var counter = 1;
if ($('.qty').val() === 0 || $('.qty').val() === '') {
$('.qty').hide();
$('.txt').show();
$('.negative').hide();
} else {
$('.txt').hide();
$('.qty').show();
$('.negative').show();
}
$('.positive').click(function() {
$('.negative').show();
$('.qty').show();
$('.txt').hide();
const qty = $('.qty').val();
$('.qty').val(counter);
counter++;
});
$('.negative').click(function() {
const qty = $('.qty').val();
if (qty > 1) {
counter--;
$('.qty').val(counter);
} else {
counter = 1;
$('.negative').hide();
$('.txt').show();
$('.qty').hide();
}
});
});
I am not sure how to use $(this) in above code.
I am beginner in JS and I know this code is not efficient.
If possible make it efficient.
Thank you!!!

I'm doing this in the code below by using .parent().find(). This can be brittle though if you rearrange your layout, so just be careful with it. You'd be better off giving a data attribute to the elements and modifying them that way.
$(document).ready(function() {
$("input").click(function() {
let clickAction = $(this).val();
console.log($(this).val());
let displayElement = $(this).parent().find("input.qty");
let currentval = +$(displayElement).val();
//you could use eval to make this look cleaner, but eval is often frowned upon
if (clickAction == "+") {
currentval++;
} else if (clickAction == "-") {
currentval--
}
$(displayElement).val(currentval);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<input type="button" class="negative" value="-">
<input type="button" class="qty" value="0">
<span class="txt">None</span>
<input type="button" class="positive" value="+">
</div>
<div class="container">
<input type="button" class="negative" value="-">
<input type="button" class="qty" value="0">
<span class="txt">None</span>
<input type="button" class="positive" value="+">
</div>

My JavaScript Code For My Calculator Web App is Not Validating in CodePen?

Hi when I put the following JavaScript code into the JS file in my CodePen for my Calculator Web App, it is not validating! First, it says, "Unexpected token ;", and then when I remove all the semi-colons, it then asks to remove, **flag**. Is there something wrong with the CodePen validator? Or is it the JavaScript code? Why wouldn't the semicolons be valid? Aren't those an integral part of JavaScript syntax?
Here is the link to my CodePen:https://codepen.io/IDCoder/pen/zEBoOQ
Here is my HTML code:
<DOCTYPE html>
<html>
<head>
<title>Ziontific Calculator</title>
<meta name="viewport" content="initial-scale=1">
</head>
<body>
<div class="container">
<h1 id="heading">ZIONTIFIC CALCULATOR</h1>
<div class="form holder">
<form id="formone" name="calc">
<input id="display" type="text" name="display" value=".....Get on board...." disabled contenteditable="false" >
<br>
<input class="button number one" type="button" value="1" onClick=”calc.display.value+=1”>
<input class="button number one" type="button" value="2" onClick="calc.display.value+=2">
<input class="button number one" type="button" value="3" onClick="calc.display.value+=3">
<input class="button three" type="button" value="C" onClick="Resetfunction(this.form)">
<input class="button three" type="button" value="<-" onClick="backspace(this.form)">
<input class="button three" type="button" value="=" onClick="evaluation(this.form)">
<input class="button number one" type="button" value="4" onClick="calc.display.value+=4">
<input class="button number one" type="button" value="5" onClick="calc.display.value+=5">
<input class="button number one" type="button" value="6" onClick="calc.display.value+=6">
<input class="button opps one" type="button" value="-" onClick="calc.display.value+='-'">
<input class="button opps one" type="button" value="%" onClick="calc.display.value+='%'">
<input class="button end one" type="button" value="cos" onClick="cos_function()">
<input class="button number two" type="button" value="7" onClick=”calc.display.value+=7”>
<input class="button number two" type="button" value="8" onClick=”calc.display.value+=8”>
<input class="button number two" type="button" value="9" onClick=”calc.display.value+=9”>
<input class="button opps two" type="button" value="*" onClick="calc.display.value+='*'">
<input class="button n" type="button" value="n!" onClick="fact_function()">
<input class="button sin"type="button" value="sin" onClick="sin_function()">
<input class="button opps two" type="button" value="." onClick="calc.display.value+='.'">
<input class="button number two" type="button" value="0" onClick="calc.display.value+=0">
<input class="button opps two" type="button" value="," onClick="calc.display.value+=','">
<input class="button opps two" type="button" value="+" onClick="calc.display.value+='+'">
<input class="button opps two" type="button" value="/" onClick="calc.display.value+='/'">
<input class="button end two" type="button" value="tan" onClick=”tan_function()”>
<input class="button third row" type="button" value="E" onClick="calc.display.value+=2.718">
<input class="button third row" type="button" value="pi" onClick="calc.display.value+=3.141">
<input class="button third row" type="button" value="x^y" onClick="power_function()">
<input class="button third row" type="button" value="(" onClick="openpara(this.value)">
<input class="button third row" type="button" value=")" onClick="closepara(this.value)">
<input class="button third row" type="button" value="log" onClick="log_function()">
<input class="button third row" type="button" value="sqrt" onClick="sqrt_function()">
<input class="button third row" type="button" value="LN2" onClick="calc.display.value+=0.693">
<input class="button third row" type="button" value="LN10" onClick="calc.display.value+=2.302">
<input class="button third row" type="button" value="log2E" onClick="calc.display.value+=1.442">
<input class="button third row" type="button" value="log10E" onClick="calc.display.value+=0.434">
<input class="button third row" type="button" value="EXP" onClick="exp_function">
</form>
</div>
</div>
</body>
</html>
And here is my JavaScript code:
<script>
flag = 0;
function openpara(val)
{
calc.display.value+=val;
flag+=1;
}
function closepara(valval)
{
calc.display.value+=valval;
flag-=1;
}
function backspace(calc)
{
var size = calc.display.value.length;
calc.display.value=calc.display.value.substring(0,size-1);
}
function Resetfunction(calc)
{
calc.display.value=” “;
flag=0;
}
function cos_function()
{
flag+=1;
calc.display.value+=’Math.cos(‘;
}
function sin_function()
{
flag+=1;
calc.display.value+=’Math.sin(‘;
}
function tan_function()
{
flag+=1;
calc.display.value+=’Math.tan(‘;
}
function log_function()
{
flag+=1;
calc.display.value+=’Math.log(‘;
}
function sqrt_function()
{
flag+=1;
calc.display.value+=’Math.sqrt(‘;
}
function exp_function()
{
flag+=1;
calc.display.value+=’Math.exp(‘;
}
function fact(x)
{
factvar=1;
for (i=1;i<=x;i++)
{
factvar=factvar*i;
}
return factvar;
}
function fact_function(x)
{
flag+=1;
calc.display.value+=’fact(‘;
}
function power_function(x)
{
flag+=1;
calc.display.value+=’Math.pow(x,y’;
}
function evaluation(calc)
{
n = calc.display.value;
var size = calc.display.value.length;
var lastchar = calc.display.value.charAt(size)
if(isNaN(lastchar) && lastchar!=”)” && lastchar!=”!”) {calc.display.value=”syntax error”;}
else if(flag!=0){calc.display.value=”error:paranthesis”;}
else {
result=eval(n);
calc.display.value=result;}
}
</script>

Looks like you are using strangely encoded tick marks. If you update them to the standard it seems to validate fine.
flag = 0;
function openpara(val) {
calc.display.value += val;
flag += 1;
}
function closepara(valval) {
calc.display.value += valval;
flag -= 1;
}
function backspace(calc) {
var size = calc.display.value.length;
calc.display.value = calc.display.value.substring(0, size - 1);
}
function Resetfunction(calc) {
calc.display.value = "";
flag = 0;
}
function cos_function() {
flag += 1;
calc.display.value += 'Math.cos(';
}
function sin_function() {
flag += 1;
calc.display.value += 'Math.sin(';
}
function tan_function() {
flag += 1;
calc.display.value += 'Math.tan(';
}
function log_function() {
flag += 1;
calc.display.value += 'Math.log(';
}
function sqrt_function() {
flag += 1;
calc.display.value += 'Math.sqrt(';
}
function exp_function() {
flag += 1;
calc.display.value += 'Math.exp(';
}
function fact(x) {
factvar = 1;
for (i = 1; i <= x; i++) {
factvar = factvar * i;
}
return factvar;
}
function fact_function(x) {
flag += 1;
calc.display.value += 'fact(';
}
function power_function(x) {
flag += 1;
calc.display.value += 'Math.pow(x,y';
}
function evaluation(calc) {
n = calc.display.value;
var size = calc.display.value.length;
var lastchar = calc.display.value.charAt(size)
if (isNaN(lastchar) && lastchar != ")" && lastchar != "!") {
calc.display.value = "syntax error";
} else if (flag != 0) {
calc.display.value = "error:paranthesis";
} else {
result = eval(n);
calc.display.value = result;
}
}