JavaScript prompt: Mostrar mensajes y cuadros de diálogo en JS

Nuevo post de repaso a la función de JavaScript prompt, su finalidad es la de mostrar por pantalla mensajes de alerta encuadrados en una pequeña ventana modal en la cual se puede rellenar información.

Otras funciones de JavaScript similares son:

• confirm()
• alert()

Sintaxis de JavaScript prompt

Veamos su sintaxis:

prompt("Texto descriptivo","Texto por defecto");

Repasemos los parámetros:

• Texto descriptivo: Es el mensaje que se mostrará por pantalla pidiendo la inserción o rellanado de información.
• Texto por defecto (Opcional): Podemos dejar un valor por defecto para que el usuario no tenga que escribirlo o rellenarlo.

Con esta sintaxis y parámetros rellenados mostraremos por pantalla un mensaje acompañado de los botones ‘Aceptar’ y ‘Cancelar’. Además al usuario se le pide la introducción de texto.

Los valores devueltos serán ‘el valor introducido’ en caso de aceptar y ‘null’ en caso de cancelar.

Ejemplo de JavaScript prompt

Vayamos con el ejemplo de JS prompt:

function alerta() 
{
var mensaje;
var opcion = prompt("Introduzca su nombre:", "Aner Barrena");

if (opcion == null || opcion == "") {
        mensaje = "Has cancelado o introducido el nombre vacío";
        } else {
            mensaje = "Hola " + opcion;
            }
            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 o introducido por el usuario, además en esta última variable se define la llamada a la ventana con mensaje al usuario y valor por defecto
• 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 >