0
358
Vistas¿Cómo cambiar los números en html después de la entrada en JavaScript y HTML?
Estoy creando una lista de ingredientes donde debería ser posible cambiar la cantidad de porciones y cambiar automáticamente la cantidad que necesita de cada ingrediente. Me las arreglé para hacer esto un poco, mi único problema ahora es que SOLO funciona si cambio el número aquí: value="4" y no en el cuadro de entrada que se muestra en el sitio web (¡lo cual se supone que debe hacer!) .
Este es el HTML:
<input type="number" id="serving" oninput="changeServing()" value="4"/> <ul> <p class="ingredient-numbers"></p> <li><span class="endre">600</span>g ingredient</li> <li><span class="endre">400</span> g ingredient</li> <li><span class="endre">2</span>ingredient</li> <li><span class="endre">1</span>ingredient</li> <li><span class="endre">2</span>ingredient</li> </ul>JavaScript:
let saveServing = document.getElementById("serving").value; let saveArray = document.getElementsByClassName("classname-for-all-list-elements-here"); function changeServing() { for (let i = 0; i < saveArray.length; i++) { saveArray[i].innerHTML = saveArray[i].innerHTML/4 * saveServing; } } Si cambio el valor en HTML (ejemplo: cambio value="4" a value="5" , etc.) funciona, el problema es que si cambio el número en el cuadro de entrada que se muestra en el sitio web; No funciona. ¿Cómo puedo hacer que funcione? Por cierto, soy muy nuevo en JavaScript, por lo que mi conocimiento es muy limitado.
PD: el valor predeterminado debe ser 4 y cambiar solo si recibe una entrada.
2 Respuestas
Responde la pregunta0
Tomé el código que @RosanPaudel escribió antes y quería mostrarle que funciona cuando cambia el valor si presiona los botones de flecha.
Por favor, míralo:
Mencioné, sin embargo, que me asegure de que esos valores tengan sentido @Kristi. Si estos valores están bien para su uso, entonces está bien para mí (no entendí exactamente qué espera que haga el algoritmo en primer lugar).
0
<input type="number" id="serving" oninput="changeServing()" value="4" /> <body> <ul> <p class="ingredient-numbers"></p> <li><span class="endre">600</span>g ingredient</li> <li><span class="endre">400</span> g ingredient</li> <li><span class="endre">2</span>ingredient</li> <li><span class="endre">1</span>ingredient</li> <li><span class="endre">2</span>ingredient</li> </ul> <script> let ingredients = document.querySelectorAll(".endre"); function changeServing() { // for (let i = 0; i < saveArray.length; i++) { // saveArray[i].innerHTML = (saveArray[i].innerHTML / 4) * saveServing; // } for (const ingredient of ingredients) { let saveServing = document.getElementById("serving").value; ingredient.innerText = (ingredient.innerText / 4) * saveServing; } } </script> </body>Esto funciona como pretendías. Cambié el nombre de la matriz de ingredientes como ingredientes y seleccioné usando queryselector. Utilicé for of loop ya que es muy fácil hacer un bucle en una matriz de objetos.