0
343
ViewsIncrease Decrease input for multiple menu items, how can this be done?
Here is my JS script
const myInput = document.getElementById("my-input");
function stepper(btn){
let id = btn.getAttribute("id");
let min = myInput.getAttribute("min");
let max = myInput.getAttribute("max");
let step = myInput.getAttribute("step");
let val = myInput.getAttribute("value");
let calcStep = (id == "increment") ? (step*1) : (step * -1);
let newValue = parseInt(val) + calcStep;
if(newValue >= min && newValue <= max){
myInput.setAttribute("value", newValue);
}
}
Here is a part of html, I have multiple of those repeating.
<div class="single-menu">
<div class="myContainer">
<button id="decrement" onclick="stepper(this)">-</button>
<input
type="number"
min="0"
max="100"
step="1"
value="0"
id="my-input"
readonly
/>
<button id="increment" onclick="stepper(this)">+</button>
</div>
<img src="https://via.placeholder.com/150" alt="" />
<div class="menu-content">
<h4>chicken fried salad <span>$45</span></h4>
<p>
Aperiam tempore sit,perferendis numquam repudiandae porro
voluptate dicta saepe facilis.
</p>
</div>
</div>
As you can see by the image below, I try to make a menu where person can choose quantity of the items in it and then order.
But the problem is that this script increases the quantity only of the first item, I do know why ( because I call same method that uses the same ids ), but is there any way to make them independent from each other?
I will load data from DB and the amout of items may vary.
I do appreciate your help.
P.S. I do know that I shouldn't use ID's twice and JS script can be optimized.
1 answers
Answer question0
Why don't we start by separating the function of increasing and decreasing?
In my code, I found input element by previousElementSibling and nextElementSibling without looking for id. So, It can also respond to dynamically increasing elements.
It's not a very nice code, but I hope it helps.
<div class="single-menu">
<div class="myContainer">
<button onclick="stepperDecrement(this)">-</button>
<input
type="number"
min="0"
max="100"
step="1"
value="0"
readonly
/>
<button onclick="stepperIncrement(this)">+</button>
</div>
<img src="https://via.placeholder.com/150" alt="" />
<div class="menu-content">
<h4>chicken fried salad <span>$45</span></h4>
<p>
Aperiam tempore sit,perferendis numquam repudiandae porro
voluptate dicta saepe facilis.
</p>
</div>
</div>
<div class="single-menu">
<div class="myContainer">
<button onclick="stepperDecrement(this)">-</button>
<input
type="number"
min="0"
max="100"
step="1"
value="0"
readonly
/>
<button onclick="stepperIncrement(this)">+</button>
</div>
<img src="https://via.placeholder.com/150" alt="" />
<div class="menu-content">
<h4>chicken fried salad <span>$45</span></h4>
<p>
Aperiam tempore sit,perferendis numquam repudiandae porro
voluptate dicta saepe facilis.
</p>
</div>
</div>
function stepperDecrement(btn){
const inputEl = btn.nextElementSibling;
const calcStep =inputEl.step * -1;
const newValue = parseInt(inputEl.value) + calcStep;
if(newValue >= inputEl.min && newValue <= inputEl.max){
inputEl.value = newValue;
}
}
function stepperIncrement(btn){
const inputEl = btn.previousElementSibling;
const calcStep = inputEl.step * 1;
const newValue = parseInt(inputEl.value) + calcStep;
if(newValue >= inputEl.min && newValue <= inputEl.max){
inputEl.value = newValue;
}
}