Nuevo post de repaso a la función de JavaScript confirm, su finalidad es la de mostrar por pantalla mensajes de alerta para su confirmación o cancelación encuadrados en una pequeña ventana modal.
También existen estas funciones de JavaScript para mostrar mensajes de alerta:
- JavaScript alert: Nos muestra una alerta por pantalla con la única opción de ‘Aceptar’.
- JavaScript prompt: Determina si el usuario ha clickado en ‘Aceptar’, ‘Cancelar’ o si se ha introducido texto en dicha ventana modal.
Os muestro una ventana de confirmación:
Sintaxis de JavaScript confirm
Veamos la sintaxis extraída de su web oficial:
|
1 |
confirm("mensaje"); |
Con esta sintaxis mostraremos por pantalla un mensaje acompañado de los botones ‘Aceptar’ y ‘Cancelar’. Este tipo de mensajes se muestran cuando se requiere por parte del usuario la aceptación o cancelación de una acción.
Los valores devueltos serán ‘true’ en caso de aceptar y ‘false’ en caso de cancelar.
Ejemplo de JavaScript confirm
Vayamos con el ejemplo de JS confirm:
|
1 2 3 4 5 6 7 8 9 10 11 |
function alerta() { var mensaje; var opcion = confirm("Clicka en Aceptar o Cancelar"); if (opcion == true) { mensaje = "Has clickado OK"; } else { mensaje = "Has clickado Cancelar"; } document.getElementById("ejemplo").innerHTML = mensaje; } |
Voy a explicar el código del ejemplo:
- Creamos la función de JavaScript ‘alerta’, está función será invocada cuando se clicke en el botón del ejemplo.
- Definimos 2 variables, una para el ‘mensaje’ y la otra variable ‘opcion’ contendrá el valor clickado por el usuario, además en esta última variable se define la llamada a la ventana con mensaje al usuario.
- Después definimos un valor a la variable ‘mensaje’ dependiendo de la opción clickada.
- Por último mostramos en el elemento con id = ejemplo el mensaje gracias a la función innerHTML().
El código HTML del botón y párrafo es el siguiente:
|
1 2 3 |
<p id="ejemplo">En este párrafo se mostrará la opción clickada por el usuario</p> <button onclick="alerta()">Clicka para mostrar mensaje</button |