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
Detailed explanation of Docker container network port configuration process
Exposing network ports In fact, there are two par...
VUE Getting Started Learning Event Handling
Table of contents 1. Function Binding 2. With par...
React hooks pros and cons
Table of contents Preface advantage: shortcoming:...
MySQL5.7 master-slave configuration example analysis
MySQL5.7 master-slave configuration implementatio...
HTML table markup tutorial (9): cell spacing attribute CELLSPACING
A certain distance can be set between cells in a ...
MySQL 8.0.18 deployment and installation tutorial under Windows 7
1. Preliminary preparation (windows7+mysql-8.0.18...
Detailed explanation of JavaScript timers
Table of contents Brief Introduction setInterval ...
Vue+js realizes video fade-in and fade-out effect
Vue+js realizes the fade in and fade out of the v...
How does Vue solve the cross-domain problem of axios request front end
Table of contents Preface 1. Why do cross-domain ...
How to configure Nginx to split traffic based on the last segment of the request IP
It is mainly the configuration jump of the if jud...
Detailed explanation of the process of building and running Docker containers
Simply pull the image, create a container and run...
Click on the lower right corner of the css pseudo-class to see a check mark to indicate the selected sample code
Effect: css: .s_type { border: none; border-radiu...
Simple understanding and examples of MySQL index pushdown (ICP)
Preface Index Condition Pushdown (ICP) is a new f...
Mysql delete duplicate data to keep the smallest id solution
Search online to delete duplicate data and keep t...
How to install SVN server under Linux
1. Yum installation yum install subversion 2. Con...