Cuando el usuario eligió un color en el selector de color. ¿Cómo puedo obtener el valor del color y usarlo más adelante en el código?
<!DOCTYPE HTML> <HTML> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> </head> <body> <label for="color">Please chose a color </label> <input type="color" id="color" name="color2"> <script> let userColor= document.querySelector("#color").value console.log(userColor) </script> </body> </html>Obtenga el valor con el evento onchange :
document.querySelector("#color").onchange = e => { console.log(e.target.value) } <label for="color">Please chose a color </label> <input type="color" id="color" name="color2">Debe agregar un detector de eventos de cambio a la entrada de color como este
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> </head> <body> <label for="color">Please chose a color </label> <input type="color" id="color" name="color2"> <script> let userColor= document.querySelector("#color"); userColor.addEventListener("change",(e) => { console.log(e.target.value) }) </script> </body> </html>Debe usar addEventListener , para que pueda llamar a una función cada vez que esto cambie:
<body> <label for="color">Please chose a color </label> <input type="color" id="color" name="color2"> <button onclick="whatColor()">ASDASD</button> <script> let color = ""; let userColor = document.querySelector("#color"); userColor.addEventListener("change", myFunction); function myFunction() { console.log(userColor.value); color = userColor.value; } function whatColor() { console.log(color); } </script> </body> Esto llamará a myFunction cada vez que cambie el valor de entrada. Para hacer que esto escriba algo, deberá cambiar el color, para asegurarse de cambiar el color, debe hacer clic fuera de la entrada cuando elija su color.
También puede usar userColor.addEventListener("input", myFunction); quién imprimirá cada vez que haga clic en la entrada