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 how to use Node.js to implement hot reload page
Preface Not long ago, I combined browser-sync+gul...
Let's talk briefly about the changes in setup in vue3.0 sfc
Table of contents Preface Standard sfc writing me...
border-radius is a method for adding rounded borders to elements
border-radius:10px; /* All corners are rounded wi...
MySQL slow query optimization: the advantages of limit from theory and practice
Many times, we expect the query result to be at m...
What are the new features of Apache Spark 2.4, which will be released in 2018?
This article is from the Apache Spark Meetup held...
MySQL database deletes duplicate data and only retains one method instance
1. Problem introduction Assume a scenario where a...
Detailed explanation of using scp command to copy files remotely in Linux
Preface scp is the abbreviation of secure copy. s...
Installation of Docker CE on Ubuntu
This article is used to record the installation o...
Detailed steps for installing and configuring MySQL 5.7
1. Download MySQL 1. Log in to the official websi...
Summary of some thoughts on binlog optimization in MYSQL
question Question 1: How to solve the performance...
In-depth analysis of the diff algorithm in React
Understanding of diff algorithm in React diff alg...
Design Reference Beautiful and Original Blog Design
All blogs listed below are original and uniquely ...
What to do if you forget the root password of Mysql5.7 (simple and effective method)
In the previous article, we introduced how to for...
Data constraint examples based on MySQL database and introduction to five integrity constraints
In order to prevent non-compliant data from enter...
Solution to the problem of being unable to access the Internet after Ubuntu restarts in VMWare
How to solve the problem of being unable to acces...