Soy bastante nuevo en Javascript y estoy tratando de actualizar la lista HTML a continuación para mostrar ciertos valores según el valor desplegable que seleccione. Sin embargo, cuando cambio las opciones desplegables, la lista no se actualiza con los valores dinámicos correctos. Intenté verificar el registro de la consola, pero tampoco se muestran errores.
¿Algún consejo sobre cómo puedo hacer que esto funcione? Preferiría seguir usando Javascript vainilla por ahora, ya que todavía estoy tratando de aprenderlo.
let sel = document.getElementById("num-of-servings"); function servingSize(sel) { selValue = sel.options[sel.selectedIndex].value; selText = sel.options[sel.selectedIndex].text; if (sel === "first") { document.getElementById("first-ingredient").innerHTML = (1 * selText) + " pounds of beef"; document.getElementById("second-ingredient").innerHTML = (1 * selText) + " teaspoons of salt"; document.getElementById("third-ingredient").innerHTML = (1 * selText) + " teaspoons of pepper"; } else if (sel === "second") { document.getElementById("first-ingredient").innerHTML = (1 * selText) + " pounds of beef"; document.getElementById("second-ingredient").innerHTML = (1 * selText) + " teaspoons of salt"; document.getElementById("third-ingredient").innerHTML = (1 * selText) + " teaspoons of pepper"; } else if (sel === "third") { document.getElementById("first-ingredient").innerHTML = (1 * selText) + " pounds of beef"; document.getElementById("second-ingredient").innerHTML = (1 * selText) + " teaspoons of salt"; document.getElementById("third-ingredient").innerHTML = (1 * selText) + " teaspoons of pepper"; } else if (sel === "fourth") { document.getElementById("first-ingredient").innerHTML = (1 * selText) + " pounds of beef"; document.getElementById("second-ingredient").innerHTML = (1 * selText) + " teaspoons of salt"; document.getElementById("third-ingredient").innerHTML = (1 * selText) + " teaspoons of pepper"; } } <select name="1" id="num-of-servings" onchange="servingSize(this)"> <option value="first">4</option> <option value="second">6</option> <option value="third">8</option> <option value="fourth">12</option> </select> <ul> <li id="first-ingredient">1 pound of beef</li> <li id="second-ingredient">1 teaspoon of salt</li> <li id="third-ingredient">1 teaspoon of pepper</li> </ul>El parámetro de servingSize consta de un montón de otras propiedades, incluido el value .
Si desea obtener value , debe obtenerlo de e.value .
En otra preocupación, text es incorrecto pero el texto innerText será 4, 6, 8, 12.
Los valores de las notas al margen de los campos/elementos HTML son cadenas de forma predeterminada, por lo que debe analizarlos en números para las operaciones numéricas.
let sel = document.getElementById("num-of-servings"); function servingSize(e) { const sel = e.value; const selText = parseInt(e.innerText); if (sel === "first") { document.getElementById("first-ingredient").innerHTML = (1 * selText) + " pounds of beef"; document.getElementById("second-ingredient").innerHTML = (1 * selText) + " teaspoons of salt"; document.getElementById("third-ingredient").innerHTML = (1 * selText) + " teaspoons of pepper"; } else if (sel === "second") { document.getElementById("first-ingredient").innerHTML = (1 * selText) + " pounds of beef"; document.getElementById("second-ingredient").innerHTML = (1 * selText) + " teaspoons of salt"; document.getElementById("third-ingredient").innerHTML = (1 * selText) + " teaspoons of pepper"; } else if (sel === "third") { document.getElementById("first-ingredient").innerHTML = (1 * selText) + " pounds of beef"; document.getElementById("second-ingredient").innerHTML = (1 * selText) + " teaspoons of salt"; document.getElementById("third-ingredient").innerHTML = (1 * selText) + " teaspoons of pepper"; } else if (sel === "fourth") { document.getElementById("first-ingredient").innerHTML = (1 * selText) + " pounds of beef"; document.getElementById("second-ingredient").innerHTML = (1 * selText) + " teaspoons of salt"; document.getElementById("third-ingredient").innerHTML = (1 * selText) + " teaspoons of pepper"; } } <select name="1" id="num-of-servings" onchange="servingSize(this)"> <option value="first">4</option> <option value="second">6</option> <option value="third">8</option> <option value="fourth">12</option> </select> <ul> <li id="first-ingredient">1 pound of beef</li> <li id="second-ingredient">1 teaspoon of salt</li> <li id="third-ingredient">1 teaspoon of pepper</li> </ul>Su código no funcionaba porque en la condición if parece que está verificando el elemento DOM en sí. Si reemplaza sel en condiciones if por selValue , funcionará como esperaba.
Se puede hacer sin condiciones if else . Solo tiene que obtener el text de la opción seleccionada y mostrar los resultados.
let sel = document.getElementById("num-of-servings"); function servingSize(sel) { let firstIngredient = document.getElementById("first-ingredient"); let secondIngredient = document.getElementById("second-ingredient"); let thirdIngredient = document.getElementById("third-ingredient"); const selText = sel.options[sel.selectedIndex].text; firstIngredient.innerText = `${selText} pounds of beef`; secondIngredient.innerText = `${selText} teaspoons of salt`; thirdIngredient.innerText = `${selText} teaspoons of pepper`; } <select name="1" id="num-of-servings" onchange="servingSize(this)"> <option value="first">4</option> <option value="second">6</option> <option value="third">8</option> <option value="fourth">12</option> </select> <ul> <li id="first-ingredient">1 pound of beef</li> <li id="second-ingredient">1 teaspoon of salt</li> <li id="third-ingredient">1 teaspoon of pepper</li> </ul>