Mostrar valor de variable en un cuadro de alerta en JavaScript

Muhammad Muzammil Hussain 12 octubre 2023

JavaScript JavaScript Alert

En este artículo, aprenderemos a usar el método alert() en JavaScript. Aprenderemos cómo usar un cuadro de alerta para mostrar un mensaje o cualquier otra información útil como una ventana emergente para el usuario en una página web.

Mostrar valor de variable en un cuadro de alerta en JavaScript

Para mostrar cualquier valor en la ventana emergente, debemos usar un cuadro de alerta. De forma predeterminada, contiene el botón Aceptar para ocultar y descartar el cuadro de diálogo emergente.

Cuando un usuario interactúa con una página web, la mayoría de las veces, los desarrolladores necesitan transmitir un mensaje útil al usuario con la ayuda de un cuadro de alerta. Por ejemplo, cuando los usuarios suben sus datos al servidor desde el lado del cliente, las páginas web muestran un mensaje de éxito o falla en el cuadro de diálogo emergente después de la validación.

El cuadro de alerta elimina el foco del usuario de la página web activa, lo que obliga al usuario a leer el mensaje de alerta.

En JavaScript, el método predeterminado alert() puede mostrar un mensaje de alerta, un valor variable y texto junto con una variable con la ayuda del operador de concatenación +.

Sintaxis básica:

let data = 'hello world'
alert(data);

Como se muestra arriba, solo necesitamos pasar un valor o variable al método alert() como argumento.

Ejemplo:

<html>
    <head>
        <title> display JavaScript alert </title>
    </head>
    <script>
    function showPopup()
    {
        var data = document.getElementById("value").value;
        //check empty data field
        if(data == "")
        {
           alert("Please enter any value..");
        }
        else
        {
            alert("Your entered value is: "+data); //display variable along with the string
        }
    }
    </script>
    <body>

        <h1 style="color:blueviolet">DelftStack</h1>
        <h3>JavaScript display alert box</h3>

        <form onsubmit ="return showPopup()">
            <!-- data input -->
            <td> Enter Value: </td>
            <input id = "value" value = "">
            <br><br>
            <input type = "submit" value = "Submit">
        </form>
    </body>
</html>

Usamos el elemento form en el código fuente HTML anterior para crear el campo de entrada del usuario y el botón Submit. El usuario insertará un valor, y cuando el usuario haga clic en el botón Submit, se activará la función showPopup().

En las etiquetas del script, hemos declarado la función showPopup(), donde obtenemos el valor de entrada del usuario en la variable data y usamos la declaración condicional if para comprobar si data está vacía o no.

Si la variable data está vacía, mostrará una alerta con un mensaje de error. De lo contrario, mostrará un mensaje de éxito con la variable data.

Mostrar valor de variable en un cuadro de alerta en JavaScript

Artículo relacionado - JavaScript Alert