He estado tratando de averiguar cómo puedo cambiar el color de fondo de un elemento de formulario cuando se hace clic en él.
Aquí está el código:
<form id="form">
<input type="text" placeholder="text"/>
<input type="password" placeholder="more text" />
</form>
<script>
</script>
Estoy tratando de hacer que el elemento de formulario donde dice "texto" se vuelva verde cuando se hace clic, y el elemento de formulario donde dice "más texto" se vuelve rojo cuando se hace clic.
He intentado esto, que no funcionó:
<script>
let form = document.queryselector('input type="text"');
form.addEventListener('click', () => {
form.style.backgroundColor = 'green'
});
</script>
Soy muy nuevo en la codificación, ¡así que cualquier ayuda es muy apreciada! ¡Gracias!
El problema es con esta línea:
let form = document.queryselector('input type="text"');
En primer lugar, el método querySelector() está en mayúsculas, tenga en cuenta la S mayúscula. En segundo lugar, su selector no es del todo correcto, está buscando: input[type="text"] :
let form = document.querySelector('input[type="text"]');
form.addEventListener('click', () => {
form.style.backgroundColor = 'green'
});
<form id="form">
<input type="text" placeholder="text"/>
<input type="password" placeholder="more text" />
</form>
Sin embargo, tenga en cuenta que esto no cambia el color de fondo una vez que se enfoca; es mejor que agregue detectores de eventos para los focusout , focusin y quizás blur , pero mejor aún, puede usar CSS:
form input[type="text"]:focus {
background-color: green;
}
debes escribir ('input[type="text"]') ;
<script>
let form = document.querySelector('input[type="text"]');
form.addEventListener("click", () => {
form.style.backgroundColor = "green";
});
</script>
Si solo desea que el fondo de entrada cambie de color mientras está enfocado. Puede lograr esto usando selectores de CSS. No hay necesidad de JS
input[type=text]:focus {
background-color: red;
}
O si desea que cambie el fondo del formulario
form:focus-within {
background-color:red;
}