Soy un principiante en JS. En mi proyecto personal, quiero usar una lista de datos de colores para cambiar el color div.
Logré hacerlo con select. Pero no funciona con la lista de datos. Así que decidí registrar en la consola el valor de la variable declarada en la función pero me sale el error: x no está definida. ¿Cómo hacer que funcione? (Probablemente sea una pregunta básica)
const selectSection = document.querySelector(".select-section"); function myFunction() { var x = document.getElementById("my-select").value; selectSection.style.backgroundColor = x; } console.log(x); <label for="my-select">Pick a color:</label> <select name="" id="my-select" value="Choose the background color" onChange="myFunction()"> <option value="default">default</option> <optgroup label="Warm Colors"> <option value="red">red</option> <option value="orange">orange</option> <option value="yellow">yellow</option> </optgroup> <optgroup label="Cool Colors"> <option value="green">green</option> <option value="blue">blue</option> <option value="purple">purple</option> </optgroup> </select>Dos opciones:
const selectSection = document.querySelector(".select-section"); let x; function myFunction() { x = document.getElementById("my-select").value; selectSection.style.backgroundColor = x; } myFunction() console.log(x); const selectSection = document.querySelector(".select-section"); function myFunction() { const x = document.getElementById("my-select").value; selectSection.style.backgroundColor = x; return x } const x = myFunction() console.log(x); Recuerda nunca usar var
Primero , no use la palabra clave var en su código. Lea este artículo para saber el motivo.
Segundo para resolver este problema.
intente declarar sus variables en el alcance global:
let x; // in global scope (outside the function)
y asigna un valor dentro de la función:
x = document.getElementById("my-select").value;
Puede declarar la variable fuera del alcance de la función, pero debe asegurarse de acceder a esa variable solo DESPUÉS de que la función se haya completado; de lo contrario, el código se ejecutará ANTES de que se ejecute la función y la variable aún no se habrá modificado.
const selectSection = document.querySelector(".select-section"); let x = null; function myFunction() { x = document.getElementById("my-select").value; document.body.style.backgroundColor = x; // If this line executes, we know x has been modified, so // it's safe to try to access it outside of the function showX(); } function showX(){ console.log(x); } <label for="my-select">Pick a color:</label> <select name="" id="my-select" value="Choose the background color" onChange="myFunction()"> <option value="default">default</option> <optgroup label="Warm Colors"> <option value="red">red</option> <option value="orange">orange</option> <option value="yellow">yellow</option> </optgroup> <optgroup label="Cool Colors"> <option value="green">green</option> <option value="blue">blue</option> <option value="purple">purple</option> </optgroup> </select>