Skip to main content

Javascript Output

JavaScript provides several ways to output data to the user.

Let's take a look at some of the most common ways to output data in JavaScript.

The alert() Function​

The alert() function displays a message in a pop-up dialog box. This is a simple way to display a message to the user, but it can be annoying if used too frequently.

Editor

Loading...

The console.log() Function​

The console.log() function writes a message to the browser's console. This is a more powerful way to output data, as it allows you to inspect objects and variables and debug your code.

<!DOCTYPE html>
<html>
  <head>
    <title>Console Log Example</title>
    <script>
      console.log("Hello World!");
    </script>
  </head>
  <body>
    <!-- This example only outputs a message to the browser console. -->
  </body>
</html>

The document.write() Function​

The document.write() function writes text directly to the HTML output stream. This is a quick and easy way to output text, but it can be slow and may cause problems if used after the page has finished loading.

Editor

Loading...

The innerHTML Function​

The innerHTML property can be used to change the HTML content of an element on the page. This allows you to add or remove content from the page dynamically.

Editor

Loading...

The textContent Function​

The textContent property can be used to change the text content of an element on the page. This is similar to innerHTML, but it only changes the text content and not the HTML content.

Editor

Loading...

The window.alert() Function​

The window.alert() function is similar to alert(), but it can be used to display alerts from within a function.

Editor

Loading...

The prompt() Function​

The prompt() function displays a dialog box that prompts the user to enter a value. This is a useful way to get input from the user.

<!DOCTYPE html>
<html>
  <head>
    <title>Prompt Example</title>
    <script>
      let name = prompt("Please enter your name:");
      console.log("Hello " + name + "!");
    </script>
  </head>
  <body>
    <!-- This example prompts the user to enter their name and outputs a message to the console. -->
  </body>
</html>

The confirm() Function​

The confirm() function displays a dialog box that prompts the user to confirm or cancel an action. This is a useful way to get confirmation from the user before performing an action.

Editor

Loading...