在 JavaScript 的警报框中显示变量值
在本文中,我们将学习在 JavaScript 中使用 alert()
方法。我们将学习如何使用警告框在网页上向用户显示一条消息或任何其他有用的信息作为弹出窗口。
在 JavaScript 的警报框中显示变量值
要在弹出窗口中显示任何值,我们必须使用警告框。默认情况下,它包含用于隐藏和关闭弹出对话框的 OK
按钮。
当用户与网页交互时,大多数时候,开发人员需要借助警报框向用户传达有用的信息。例如,当用户从客户端将数据上传到服务器时,网页在验证后会在弹出对话框中显示成功或失败消息。
警报框将用户的焦点从活动网页上移开,迫使用户阅读警报消息。
在 JavaScript 中,默认的 alert()
方法可以在连接运算符 +
的帮助下显示警报消息、变量值和文本以及变量。
基本语法:
let data = 'hello world'
alert(data);
如上所示,我们只需要将值或变量作为参数传递给 alert()
方法。
例子:
<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>
我们使用上述 HTML 源代码中的 form
元素来创建用户输入字段和 Submit
按钮。用户将插入一个值,当用户单击 Submit
按钮时,将触发函数 showPopup()
。
在脚本标签中,我们声明了 showPopup()
函数,我们在 data
变量中获取用户输入值并使用条件语句 if
检查 data
是否为空。
如果 data
变量为空,它将显示带有错误消息的警报。否则,它将显示带有 data
变量的成功消息。
相关文章
JavaScript 函数重载
发布时间:2024/03/17 浏览次数:129 分类:JavaScript
-
本教程展示了如何使用 if-else 语句、switch 语句和函数表达式在 JavaScript 中实现函数重载。
JavaScript 中的 history.forward() 函数
发布时间:2024/03/17 浏览次数:195 分类:JavaScript
-
本文将帮助你了解如何使用 JavaScript 浏览浏览器。
JavaScript console.error
发布时间:2024/03/17 浏览次数:61 分类:JavaScript
-
JavaScript 有多个与其他数据类型和对象交互的对象。控制台也是一个类似的对象,它允许我们在浏览器环境中预览开发输出。本文展示了控制台在 JavaScript 中的使用。
Discord JavaScript 控制台
发布时间:2024/03/17 浏览次数:177 分类:JavaScript
-
实验上,通过控制台面板向收件人发送消息是一个有趣的事实。几乎抽象的 UI 在发送和接收消息时几乎没有任何踪迹来了解正在运行的内容。使用标头,添加特定的用户 ID,结合 Disco