Output in JavaScript
JavaScript output refers to the information or results a script produces. This output can be displayed in different ways.
We can retrieve JavaScript output on a webpage in four simple and diverse ways, which are listed below. We can use them based on the application’s requirements. In this article, we’ll cover four alternative ways to get output from JavaScript code, similar to how we use printf() in C and cout in C++.
- Using the InnerHTML property
- Using the document.write() function.
- Using Alert Box.
- By logging into the Console
In the below PDF we discuss about Output in Javascript in detail in simple language, Hope this will help in better understanding.
We will cover all of this via examples. Also, don’t worry if you don’t understand the syntax for these; we’ll go over them in detail in future courses.
1. JavaScript innerHTML property.
You can use JavaScript’s innerHTML property to write into an HTML element. We can add anything we want, such as a text message, an HTML element, or anything else.
To do so, you must first assign a specific Id to the HTML element that you wish to access via JavaScript code.
To access an HTML element in JavaScript, use the document.getElementById(id) method, where id is the HTML tag’s id attribute.
Consider the following example: the id attribute is used to identify the HTML element, and the innerHTML property is used to set its content.
<html>
<head>
<title>JavaScript Output using innerHTML</title>
<script>
function addText()
{
document.getElementById("script").innerHTML= "Topperworld";
}
</script>
</head>
<body>
<p id="script">This is the old text.</p>
<button type="button" onclick="addText()">Click to use JavaScript</button>
</body>
</html>
This way, if you’re writing JavaScript code to perform some processing or reasoning, you can quickly display the results on an HTML page.
2. JavaScript Output with document.write().
The document.write() method in JavaScript allows you to write any output into an HTML webpage. Using this approach, you can immediately write output to an HTML page.
The write() method adds HTML expressions or JavaScript code to the document. This method is primarily utilised for testing purposes.
Consider the following example: we use the document.write() function to write straight to the webpage.
<html>
<head>
<title>JavaScript Output using document.write()</title>
</head>
<body>
<script>
document.write("Learn Javascript with Topperworld") ;
</script>
</body>
</html>
3. JavaScript Output with Alert Box:
Certain websites generate alert messages when you visit them, and when you make an action, the output message appears in alert boxes. You can also utilise JavaScript to have your webpage send alert messages to tell the user; to do so, use the window.alert() method.
Let’s look at an example in which we use the alert box to create a message and display it to the user.
<html>
<head>
<title>JavaScript Output using Alert Box</title>
</head>
<body>
<script>
window.alert("This is an alert message.") ;
</script>
</body>
</html>
4. JavaScript Console Logging:
JavaScript also allows you to create console logs, which may be viewed in the browser’s developer tools (Console) for debugging. The statement entered in a console log will be executed but not displayed in the browser; rather, it will be displayed within the browser’s console.
Console logging is performed using the function console.log(SOME-EXPRESSION-OR-STRING), which may be used to log anything in the browser console.
To launch developer tools in Chrome, use F12 in Windows or Command + Option + I in MacOS. The image below depicts how it looks.
Let’s look at an example of JavaScript code that prints logs to the console:
<html>
<head>
<title>JavaScript console example</title>
<script>
console.log(2+3);
</script>
</head>
<body>
<!-- HTML body -->
</body>
</html>
Related Question
You can use the alert() function to display a simple pop-up alert with a message.
The console.log() method is used to print messages or values to the console for debugging purposes.
You can use the innerHTML property to change the content of an HTML element.
You can use HTML entities or escape characters to prevent JavaScript code from being executed.
Relevant
JavaScript JSON JSON stands for
JavaScript Function Generator Function generators,
JavaScript WeakSet A WeakSet is
JavaScript WeakMap A WeakMap is
JavaScript Proxy A JavaScript Proxy
JavaScript Boolean JavaScript Boolean is
JavaScript BigInt JavaScript BigInt represented
