How to Display output in JavaScript (4 ways)

In this post, we are going to learn how to Display output in JavaScript or How to Display output in JavaScript by using the different method that display output on browser console and browser window inside HTML element and by using a pop-up box.

1. JavaScipt Console.log()


The most used way to display output in javaScript.The console.log() is used to print message on console and used for debugging.There are multiple variations of these ways that we will understand with javascript code examples.

  • We have print variable x to console using console.log()
  • We have display string on browser console using console.log(‘Hi devenum’);
  • The console.log() can be used to display the function output on window,We have print output on function “greet()”
  • We have printing the all object properties along with values using console.log()

const x =9;

//Display variable
console.log(x);

//display string
console.log('Hi devenum');



// Display function output
function greet() {
    return 'Hello Devenum';
}
console.log(greet());

// Display string and variable 
const name = 'John';
console.log('Hello ' + name);

// passing object
let myobj = {
    Subj: 'Math',
    marks: 28
}
console.log(myobj);

Output

9
Hi devenum
Hello Devenum
Hello John
{ Subj: 'Math', marks: 28 }

2. Display output Using alert Dialog box


The alert() dialog box displays the output message in a pop-up box. We can also use it to print output in JavaScript.

//display a string message
alert("Hi Devenum!"); 

// Print variable values
var num = 30;
var num2 = 20;
var sum = num + num2;
alert(sum); 

3. Print on Browser window document.write()


The document.write() method help us to write on browser window and it write content of current document only.

// Printing a variable value 
var num = 10;
var str = " Hi Devenum";
document.write(num); 
document.write(str);

//output

10 Hi Devenum

4. Insert Output in HTML element


We can insert inside an HTML tag my using innerText or innerHTML both are the variables of HTML object used for a different purpose

  • innerText : The value assign using this variable is written inside the html element and used for text purpose only.
  • innerHTML : The innerHTML change the HTML of the element.Sometime we add element in div using the innerHTML.

Using innerText

In this example the documnet.getElementById() is used to get the ID of HTML element inside which we want to insert text.The innerText to write text inside HTML element “parHome”.

<p id = "parHome"></p>

var mypara = document.getElementById('parHome');
mypara.innerText = 'Hi good Morning!';

Output

Hi good Morning!

Using innerHTML

In this example the documnet.getElementById() is used to get the ID of HTML element inside which we want to insert another HTML element.The innerHTML to add HTML elements(<h3>,<p> inside “parHome”.

<div id="divHome">

</div>


var myDiv = document.getElementById('divHome');
myDiv.innerHTML = '<h3>Hello</h3> <p>Hi there!</p>';


Output

Hello
Hi there!