Hola, comencé a aprender JS hoy y pensé en intentar hacer un cambiador de color desplegable, he intentado muchas cosas pero parece que no puedo hacer que funcione, también probé onchange en lugar de onclick pero aún nada, se agradece cualquier ayuda
HTML:
<label for="color">Choose a color: </label> <select id="text" name="colorpicker"> <option value="red" onclick="red()">Red</option> <option value="green" onclick="green()">Green</option> <option value="blue" onclick="blue()">Blue</option> <option value="purple" onclick="purple()">Purple</option> </select> <p id="text">This text changes color</p>JAVASCRIPT:
function red() { console.log((document.getElementById("text").style.color = "red")); } function green() { console.log((document.getElementById("text").style.color = "green")); } function blue() { console.log((document.getElementById("text").style.color = "blue")); } function purple() { console.log((document.getElementById("text").style.color = "purple")); }Primero, usa el texto del identificador dos veces para diferentes elementos. El ID de atributo es un atributo único, por lo que especifiqué un ID diferente para la etiqueta <select> .
En segundo lugar, utilicé el evento onchange para la etiqueta <select> en lugar del evento onclick para las etiquetas <option> , porque esta forma es correcta .
Tercero, una sola función que usa el element de argumento es suficiente para asignar un color. Y para asignar un color, usamos el valor del atributo value de la etiqueta <option> . Para que pueda agregar una nueva etiqueta de opción con el color deseado.
function color(element) { document.getElementById("text").style.color = element.value; } <label for="color">Choose a color: </label> <select id="text_select" onchange="color(this)" name="colorpicker"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="purple">Purple</option> </select> <p id="text">This text changes color</p>