JavaScript message box example
|
Three types of message boxes can be created in JavaScript: warning boxes, confirmation boxes, and prompt boxes. Warning boxAlert boxes are usually used to ensure that users get certain information. When the warning box appears, the user needs to click the OK button to continue the operation. Syntax format:
window.alert("Warning text");Example source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS alert box example</title>
<script>
function myFunction(){
alert("Hehe, this is a warning box!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="Show warning box" />
</body>
</html>Save as: JS warning box example.html Run the test with a browser and the results are as follows:
Confirmation BoxConfirmation boxes are often used to verify that a user action is accepted. When the confirmation box pops up, the user can click "Confirm" or "Cancel" to confirm the user operation. When you click "Confirm", the confirmation box returns true, if you click "Cancel", the confirmation box returns false. Syntax format:
window.confirm("text");Example source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS confirmation box example</title>
</head>
<body>
<p>Click the button to display a confirmation box. </p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var r=confirm("Hehe, this is a box example!");
if (r==true){
//x="You pressed the \"OK\" button!";
x='You pressed the "OK" button!';
}
else{
//x="You pressed the \"Cancel\" button!";
x='You pressed the "Cancel" button!';
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>Save as: JS confirmation box example.html Run the test with a browser and the results are as follows:
Tips boxPrompt boxes are usually used to prompt users to enter a value before entering the page. When the prompt box appears, the user needs to enter a value and then click the Confirm or Cancel button to continue the operation. If the user clicks OK, the return value is the entered value. If the user clicks Cancel, the return value is null. Syntax format:
window.prompt("prompt text","default value");Example source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS prompt box example</title>
</head>
<body>
<p>Click the button to view the input dialog. </p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var person = prompt("Please enter your name", "Tom");
if (person!=null && person!=""){
x="Hello" + person + "! How are you feeling today?";
document.getElementById("demo").innerHTML=x;
}
}
</script>
</body>
</html>Save as: JS prompt box example.html Run the test with a browser and the results are as follows:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to use mysqladmin to get the current TPS and QPS of a MySQL instance
>>: Quickly solve the problem of slow Tomcat startup, super simple
Recommend
HTML set as homepage and add to favorites_Powernode Java Academy
How to implement the "Set as homepage" ...
html+css+js to realize the function of photo preview and upload picture
Preface: When we are making web pages, we often n...
HTML dl, dt, dd tags to create a table vs. Table creation table
Not only does it reduce the cost of website develo...
HTML Language Encyclopedia
123WORDPRESS.COM--HTML超文本标记语言速查手册<!-- --> !D...
Summary of basic usage of $ symbol in Linux
Linux version: CentOS 7 [root@azfdbdfsdf230lqdg1b...
Initial summary of the beginner's website building tutorial
After writing these six articles, I started to fee...
Analysis of examples of using anti-shake and throttling in Vue components
Be careful when listening for events that are tri...
CenOS6.7 mysql 8.0.22 installation and configuration method graphic tutorial
CenOS6.7 installs MySQL8.0.22 (recommended collec...
How to keep the content within the container when the flex layout is stretched by child elements
On mobile devices, flex layout is very useful. It...
Detailed steps to download Tomcat and put it on Linux
If you have just come into contact with Linux, th...
Tomcat multi-instance deployment and configuration principles
1. Turn off the firewall and transfer the softwar...
How to automatically backup the script for Linux servers (mysql, attachment backup)
1. Create the backup.sh script file #!/bin/sh SOU...
Detailed explanation of Docker daemon security configuration items
Table of contents 1. Test environment 1.1 Install...
Example of implementing hollow triangle arrow and X icon with after pseudo element
In the front-end design draft, you can often see ...
JavaScript destructuring assignment detailed explanation
Table of contents concept Array Destructuring Dec...