Esta guía demostrará el objetivo y el funcionamiento del evento 'onchange' en JavaScript.
¿Cómo usar un evento 'onchange' en JavaScript?
El ' en el cambio El evento se activa cuando se cambia el valor del elemento HTML especificado. Cuando se activa este evento, la función de JavaScript asociada se ejecuta para realizar la tarea específica.
Sintaxis
objeto. en el cambio = función ( ) { miScript } ;
En la sintaxis anterior:
- elemento: Denota el elemento HTML particular.
- función(): Representa la función definida que se invocará en el desencadenante del evento.
- miScript: Se refiere a la definición de la función de JavaScript para realizar la tarea específica cuando ocurre el evento 'onchange'.
Sintaxis (con el método 'addEventListener ()')
objeto. agregarEventListener ( 'cambiar' , miScript ) ;
En la sintaxis anterior, el ' agregarEventListener() El método ” utiliza el “ en el cambio ” para ejecutar la función de JavaScript para realizar varias tareas.
Ejemplo 1: aplicar el evento 'onchange' para mostrar el valor seleccionado usando la sintaxis básica
En este escenario, un evento 'onchange' se asocia con una lista de opciones para mostrar el valor de la opción modificada e invocar la función de JavaScript correspondiente.
código HTML
Eche un vistazo al siguiente código HTML:
< h2 > en el cambio Evento en JavaScript h2 >< pag > Elija otro idioma de la lista. pag >
< seleccionar identificación = 'manifestación' en el cambio = 'Muestra()' >
< valor de la opción = 'HTML' > HTML opción >
< valor de la opción = 'CSS' > CSS opción >
< valor de la opción = 'JavaScript' > JavaScript opción >
seleccionar >
< identificación p = 'P1' > pag >
En el código anterior:
- Primero, defina un subtítulo usando el “ ' etiqueta.
- A continuación, agregue un párrafo con la declaración indicada.
- Después de eso, el “
” etiqueta crea una lista desplegable con una identificación asignada “ manifestación ' y el ' en el cambio 'evento redirige a la función' Muestra() ”, respectivamente. - En el cuerpo de la etiqueta “
”, se especifica una lista de opciones usando el “ ' etiqueta. - Por último, se crea un párrafo vacío con una identificación ' P1 ” para mostrar el valor seleccionado/cambiado de la lista de opciones.
Código JavaScript
Ahora, una descripción general del siguiente código JavaScript:
< guion >muestra de función ( ) {
dónde = documento. getElementById ( 'manifestación' ) . valor ;
documento. getElementById ( 'P1' ) . HTML interno = 'La opción seleccionada es: ' + t ;
}
guion >
En el bloque de código anterior:
- En primer lugar, declare una función llamada ' Muestra() ”.
- En su definición, aplica el “ getElementById() ” para acceder al valor de la opción seleccionada de la lista de opciones a través del “ valor ' propiedad.
- Por último, muestre el valor usando el botón “ HTML interno ' propiedad.
Producción
Como se ve en la salida, al seleccionar una opción del menú desplegable, el evento 'onchange' se activa e invoca la función correspondiente.
Ejemplo 2: Aplicar el evento “onchange” para cambiar el texto del campo de entrada en mayúsculas usando la sintaxis del método “addEventListener()”
Este ejemplo explica el funcionamiento del evento 'onchange' al cambiar el campo de texto de entrada a 'Mayúsculas' con la ayuda del método 'addEventListener()'.
código HTML
Primero, revise el código HTML proporcionado a continuación:
< h2 > en el cambio Evento en JavaScript h2 >Nombre : < tipo de entrada = 'texto' identificación = 'manifestación' >
< botón > Entregar botón >
En el código HTML anterior:
- Definir un subtítulo de nivel 2 a través de la ' ' etiqueta.
- A continuación, agregue un '
” campo junto a la etiqueta “ Nombre ', tipo de contenido ' texto ”, y la identificación asociada “ manifestación ”, respectivamente. - Finalmente, incluya un botón usando el “
' etiqueta.
Código JavaScript
A continuación, observe el siguiente código JavaScript:
< guion >documento. getElementById ( 'manifestación' ) . agregarEventListener ( 'cambiar' , Muestra ) ;
muestra de función ( ) {
dónde = documento. getElementById ( 'manifestación' ) ;
t. valor = t. valor . aMayúsculas ( ) ;
}
guion >
En este bloque de código:
- Primero el ' documento.getElementById() El método ” utiliza el “ cambiar 'evento que resultará en el cambio del valor del campo de texto de entrada que tiene id' manifestación ” al hacer clic en el botón.
- A continuación, se define la función 'Muestra()' que utiliza el método 'document.getElementById()' para acceder al campo de texto de entrada 'demo' y luego cambia su valor a 'Mayúsculas' a través de ' Mayúsculas() ' método.
Producción
Como se ve, el texto de entrada se ha convertido a mayúsculas al hacer clic en el botón.
Conclusión
JavaScript ofrece el comúnmente utilizado “ en el cambio ” evento que se activa tan pronto como cambia el estado del valor de un elemento en particular. Es similar al “ en la entrada ” pero el evento “oninput” ocurre instantáneamente a medida que cambia el valor, mientras que el evento “onchange” se activa cuando el valor del evento pierde el foco. Esta guía demostró el objetivo, el funcionamiento y el uso del evento 'onchange' en JavaScript.