Actualmente tengo un proyecto con un selector de color html. También tengo una variable llamada color declarada usando JavaScript. Lo que me pregunto es cómo puedo establecer el color variable constantemente en el valor hexadecimal del selector de color. Por ejemplo, si cambio el selector de color a azul, el color variable se establecerá en #009DFF (valor hexadecimal para el color azul)
¿Cómo se puede hacer esto?
<input type="color" value="#ff0000" style="border:3px solid #222; border-radius: 6px; " /> <script> let color = 5; document.write (color); </script>Supongo que desea actualizar el texto junto al selector de color cada vez que se cambia.
En primer lugar, el código de su etiqueta de secuencia de comandos se ejecutará solo una vez. No se actualizará en vivo a menos que proporcione la funcionalidad.
En segundo lugar, document.write agregará el valor de color a su documento, por lo que incluso si lo llamó varias veces, terminará con su página con el aspecto 5#ff0000#f932a2#bb7d3e... .
Si desea llamar a una función cada vez que cambie el valor de su selector de color, use el oninput o onchange en su entrada para llamar a una función en su javascript.
Luego, en la función, seleccione un elemento específico de su DOM para cambiar su valor.
function updateColorText(colorText) { document.getElementById("color-text").innerText = colorText; } <input type="color" value="#ff0000" style="border:3px solid #222; border-radius: 6px;" oninput="updateColorText(this.value)" /> <span id="color-text"></span>Recomiendo investigar el evento de entrada, el evento de cambio y leer sobre el manejo de eventos de JavaScript en general.
Puede hacerlo utilizando el controlador de eventos onchange del objeto selector de color.
var colorCode; function colorPickerEventHandler(value){ colorCode= value; alert(colorCode); console.log(colorCode); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p> <label for="color-picker">First Color Picker: </label> <input onchange="colorPickerEventHandler(this.value)" id="color-picker" type="color" value="#000000"/> </p> </body> </html>Pondría una identificación en la entrada de color, luego usaría document.getElementById para acceder a ella en el javascript para obtener el valor. Algo como esto:
<input type="color" value="#ff0000" style="border:3px solid #222; border-radius: 6px;" id="colorPicker" /> <script> let color = document.getElementById("colorPicker").value; console.log(color); </script>