JAVASCRIPT DISPLAY OUTPUT

In the coming chapters we will use javascript property to display output / results on the screen. We will learn in this chapter how to display some content on the screen using javascript.

Different Ways To Display Output using Javascript

Javascript can display output using following methods:

1. Injecting text into elements, using innerHTML property.
2. Injecting text into HTML document, using document.write() method.
3. Displaying using alert box, window.alert() or alert() method.
4. Displaying in the browser's console, using console.log() method.

How to access an Element in javascript

Javascript has many methods to access any element from the HTML document. Some of these are

• Accessing elements using id, using getElementById("id") method.
• Accessing elements using class name, using getElementsByClassName("class") method.
• Accessing elements using tag name, using getElementSByTagName("tag") method.

In the coming chapter we will mainly use the getElementById method. To access the element we pass id of that element in this method.

1. Output Using innerHTML

innerHTML is a property for HTML elements. To write something inside an element we first get that element (here using getElementById method) and then apply innerHTML property to that. For example getElementById("id").innerHTML = "Hello, World!" .

document.getElementById("output").innerHTML = "Hello, World!";
//getting access to "p" tag by "getElementById" then using "innerHTML" property to show output

2. Output Using document.write()

document.write() is a method using which you can write something on a webpage.

document.write() method overwrites all of the things inside an HTML document, So be careful while using it. Never use this method after the document is loaded otherwise it will overwrite all.

document.write("Hello, World!");

3. Output Using document.alert()

document.alert or alert method is used to show some output or result. It creates a pop up showing the result.

window.alert("Hello, World!"); // or just alert("Hello, World!");

4. Output Using console.log

console.log is used to show results in the console. console is used by developers for debugging purposes.

To open console press ctrl+shift+i or f12 then switch to console tab.

To show results in console write console.log(your_output_here). Using it you can output number, string, boolean, function, objects and many more.

console.log("Hello, World!");
console.log(123);
console.log(document);
console.log("Hello World", 123); // multiple output can also be shown separating by comma

Output :

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.