0
351
VistasAumentar Disminuir la entrada para múltiples elementos del menú, ¿cómo se puede hacer esto?
Aquí está mi script JS
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); } }Aquí hay una parte de html, tengo varios de esos que se repiten.
<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> Como puede ver en la imagen a continuación, trato de hacer un menú donde la persona puede elegir la cantidad de los artículos que contiene y luego ordenar. 
Pero el problema es que este script aumenta la cantidad solo del primer elemento, sé por qué (porque llamo al mismo método que usa los mismos identificadores), pero ¿hay alguna forma de hacerlos independientes entre sí? Cargaré datos de DB y la cantidad de elementos puede variar.
Agradezco tu ayuda.
PD: sé que no debería usar ID dos veces y que el script JS se puede optimizar.
1 Respuestas
Responde la pregunta0
¿Por qué no empezamos por separar la función de aumentar y disminuir?
En mi código, encontré el elemento de entrada por previousElementSibling y nextElementSibling sin buscar la identificación. Por lo tanto, también puede responder a elementos que aumentan dinámicamente.
No es un código muy agradable, pero espero que ayude.
<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; } }