JavaScript confirm: Mostrar mensajes de confirmación en JS

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:

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:

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:

<p id="ejemplo">En este párrafo se mostrará la opción clickada por el usuario</p>

<button >