In order to see the result of calculations made with JavaScript, the value of variables or any data, we need to print it on the screen.

Printing to the screen;

  • Printing to HTML objects – innerHTML,
  • Printing to HTML page – document.write(),
  • Printing to the alert window – alert(),
  • Printing to the browser console – console.log()

Using innerHTML

The document.getElementById(ID) method is often used to select HTML objects with JavaScript.

After the selection process, we can change the content of the selected HTML object with the innerHTML property.

<p id="p1"></p>

<script>
  document.getElementById("p1").innerHTML = "baransel.dev";
</script>

Using document.write()

The document.write() method is used to test JavaScript commands and quickly print the results to the screen.

<p>This is a paragraph</p>

<script>
   document.write("baransel.dev");
</script>

If the document.write() method is used as a result of an event, all HTML elements on the page will be deleted.

<p>This is a paragraph</p>

<button onclick="document.write('baransel.dev')">Click here</button>

Using alert()

The alert() method is used to print the JavaScript data as a warning message.

<p>This is a paragraph</p>

<script>
  alert("baransel.dev");
</script>

Using console.log()

You can use console.log() to display operations on JavaScript Arrays, Objects or to make written commands more efficient and print them to the screen.

<p>This is a paragraph</p>

<script>
  console.log("baransel.dev");
</script>

NOTE: The Console Screen section of your browser must be active to see the result.