JavaScript Output and Input Methods
JavaScript Output Method and Properties:
alert()
confirm()
document.write()
innerHTML
innerText
outerHTML
console.log()
console.error()
console.warn()
console.debug()
console .info()
alert() :
It is used to display output in a message box.
User have to confirm the message in order to continue.
Syntax:
alert(“message/ expression”);
You can’t cancel alert. “esc” key is similar to OK
For Example :
<!DOCTYPE html>
<html>
<head>
<title>Reference</title>
<script type="text/javascript">
function DeleteClick(){
alert("Record Deleted");
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
</body>
</html>
confirm() :
It is similar to alert, but provides option to cancel the message.
It returns true on OK and false on Cancel.
For Example :
<!DOCTYPE html>
<html>
<head>
<title>Reference</title>
<script type="text/javascript">
function DeleteClick(){
x = confirm("Are you sure want to Delete?");
if(x==true){
alert("Record Deleted");
} else {
alert("Canceled..");
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
</body>
</html>
document.write() :
It is used to print output in a new screen of same page.
The output is erased when you refresh the page.
For Example :
<!DOCTYPE html>
<html>
<head>
<title>Reference</title>
<script type="text/javascript">
function DeleteClick(){
x = confirm("Are you sure want to Delete?");
if(x==true){
document.write("Record Deleted");
} else {
alert("Canceled..");
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
</body>
</html>
innerHTML & innerText :
It is used to define output in containers like div, span, dt, td, p, blockquote.
innerText is an RC data element. [Text without formats]
innerHTML supports formats.
innerText : Example
<!DOCTYPE html>
<html>
<head>
<title>Reference</title>
<script type="text/javascript">
function DeleteClick(){
x = confirm("Are you sure want to Delete?");
if(x==true){
document.getElementById("msg").innerText="<font color='red'>Record Deleted</font>";
} else {
alert("Canceled..");
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
<p align="center" id="msg"></p>
</body>
</html>
innerHTML : Example
<!DOCTYPE html>
<html>
<head>
<title>Reference</title>
<script type="text/javascript">
function DeleteClick(){
x = confirm("Are you sure want to Delete?");
if(x==true){
document.getElementById("msg").innerHTML="<font color='red'>Record Deleted</font>";
} else {
alert("Canceled..");
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
<p align="center" id="msg"></p>
</body>
</html>
innerHTML will add inside existing element.
outerHTML will add by replacing existing element.
outerHTML : Example
<!DOCTYPE html>
<html>
<head>
<title>Reference</title>
<script type="text/javascript">
function DeleteClick(){
x = confirm("Are you sure want to Delete?");
if(x==true){
document.getElementById("msg").outerHTML="<h2><font color='red'>Record Deleted</font></h2>";
} else {
alert("Canceled..");
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
<p align="center" id="msg"></p>
</body>
</html>
Console options :
console .info()
console.error()
console.warn()
Example :
<!DOCTYPE html>
<html>
<head>
<title>Reference</title>
<script type="text/javascript">
function DeleteClick(){
x = confirm("Are you sure want to Delete?");
console.info("Delete Initiated");
if(x==true){
console.error("Delete Completed");
document.getElementById("msg").outerHTML="<h2><font color='red'>Record Deleted</font></h2>";
} else {
alert("Canceled..");
console.warn("Canceld action");
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
<p align="center" id="msg"></p>
</body>
</html>
JavaScript Input Properties :
JavaScript can handle input from user by using
prompt()
Form Input Elements
Prompt():
It opens a dialog in browser and allows user to input value.
User can input any type of value like text, number, boolean etc. but not complex values like images, binary type data etc.
Prompt is used when input is not regular.
Syntax:
prompt(“Message”, “Default Value”);
Prompt returns following :
null: When it is cancelled with or without value.
Empty: When you click OK without value.
Value: When you click OK with value.
For Example :
<!DOCTYPE html>
<html>
<head>
<title>Input</title>
<script>
function CreateClick(){
folderName = prompt("Enter Folder Name:","New_Folder");
if(folderName==null) {
document.write("You cancelled");
} else if (folderName=="") {
document.write("Name can't be empty");
} else {
document.getElementById("msg").innerHTML+= "Folder Created :" + folderName + "<br>";
}
}
function bodyload(){
username = prompt("Your Name:");
document.getElementById("heading").innerHTML="Hello ! " + username;
}
</script>
</head>
<body class="container-fluid" onload="bodyload()">
<h2 id="heading"></h2>
<div>
<button onclick="CreateClick()" class="btn btn-primary">Create Folder</button>
</div>
<div>
<p id="msg"></p>
</div>
</body>
</html>
Input using Form Elements :
HTML form provide several elements that allow the user to input a value.
The commonly used elements for input :
Textbox: Used for entering single-line text, like names or emails.
Checkbox: Lets users select one or more options from a list.
Radio Button: Allows users to pick only one option from a group.
ListBox: Shows a scrollable list for single or multiple selections.
Dropdown: Provides a compact list for choosing one option.
For Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Elements Example</title>
</head>
<body>
<form>
<!-- Textbox -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name"><br><br>
<!-- Checkbox -->
<label>
<input type="checkbox" name="subscribe" value="newsletter">
Subscribe to Newsletter
</label><br><br>
<!-- RadioButton -->
<p>Gender:</p>
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label><br><br>
<!-- ListBox -->
<label for="skills">Select your skills:</label>
<select id="skills" name="skills" size="3" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select><br><br>
<!-- Dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>