Common Output Techniques in JS - Part 1
•JavaScript•3 min read
javascripthtmlbeginnerweb development
Learn how to display messages and interact with users using JavaScript's alert(), confirm(), and innerText methods.
Common Output Techniques in JavaScript
Some common output techniques in JavaScript are:
1. alert() Function:
- It can display a pop-up dialog box with a message and an OK button.
- Suppose we want to display an alert message when we click on a button.
- We can achieve this by adding an
onclickevent to the button that calls a function namedshowAlert. - In JavaScript, we create this function
showAlertto display the alert message:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert Example</title>
</head>
<body>
<button onclick="showAlert()">Click me</button>
<script>
function showAlert() {
alert('You clicked on the button.');
}
</script>
</body>
</html>Display Alert Message
When we click on the button, it shows an alert message.
- We can also show a variable that contains a string or any message. For example:
function showAlert() {
let userName = 'Coders';
alert('Hello, ' + userName);
}When we click on the button, it shows: Hello, Coders.
Important Note:
- The alert function is a blocking function, meaning it pauses the execution of JavaScript until the alert box is closed.
2. confirm() function:
- The
confirm()function is used to display a dialog box with OK and Cancel buttons. - It allows the user to confirm or cancel an action.
- The
confirm()function returns a Boolean value:trueif the user clicks OK.falseif the user clicks Cancel.
Example:
- Suppose we have a Delete button that triggers a
deleteData()function when clicked.
<body>
<button onclick="deleteData()">Delete</button>
</body>Let's create a deleteData() function in JavaScript. This function will display a confirmation message and handle the user's response.
function deleteData() {
let result = confirm("Are you sure?");
if (result === true) {
alert("Data deleted.");
} else {
alert("Data not deleted.");
}
}How it works:
- When the Delete button is clicked, it triggers the
deleteData()function. - The
confirm()function shows a dialog box with the message "Are you sure?". - If the user clicks OK:
- The result variable is
true. - An alert displays: "Data deleted".
- The result variable is
- If the user clicks Cancel:
- The
resultvariable isfalse. - An alert displays: "Data not deleted".
- The
3: innerText Property:
- The
innerTextproperty is used to represent the plain text within an HTML element. - It does not use any HTML tags and only sets or returns the text content.
Example:
- Suppose we have an empty heading element in our HTML:
<h1 id="main-heading"></h1>- To add text to this heading element using JavaScript, we first assign an
idto the heading, likemain-heading. - Then, we access this heading element in JavaScript and store it in a variable called
heading:
let heading = document.getElementById('main-heading');- Next, we update the text of the heading element using the
innerTextproperty:
let heading = document.getElementById('main-heading');
heading.innerText = "Hello coders";- This will update the text inside the
<h1>tag to "Hello coders". - If there is already text inside the HTML element, using
innerTextwill replace the existing text. For example:
let heading = document.getElementById('main-heading');
heading.innerText = "Hello coders";
heading.innerText = "This is innerText property";Summary:
- The
innerTextproperty allows us to dynamically change the text content of an HTML element using JavaScript. - It replaces any existing text inside the element with new plain text.
