4 Ways to Print in JavaScript: Console, Window Alert, & More

PDF download Download Article
Easily display text in the browser terminal, window, or browser console
PDF download Download Article

In computer programming, Print is a command used to display some type of text on-screen. Unlike other programming languages, JavaScript is rendered within a web browser. JavaScript doesn't have a simple Print command like a lot of other languages do. However, you can display text in many ways, either within the HTML document, an alert window, or the console.

Things You Should Know

  • Use innerHTML to print the JavaScript inside the HTML document.
  • Use alert() to print the JavaScript inside a pop-up window.
  • Use console.log () to print the JavaScript inside the console window.
Method 1
Method 1 of 4:

Using InnerHTML

PDF download Download Article
  1. This is the opening HTML tag for paragraph text with a specific id.
  2. This assigns the paragraph text element an ID that can be recalled in JavaScript. For example, "<p id="math">".
    • You can also use other text HTML elements, such as header <h1 id=>
    Advertisement
  3. This adds a closing tag for the opening paragraph HTML element
  4. This adds a new line to your HTML.
  5. This is the opening tag for your Javascript. All JavaScript coding should go after this tag.
  6. This is the JavaScript code to call an HTML element by its ID.
  7. If your paragraph element is "<p id="math">", your JavaScript code would read "document.getElementById("math")".
  8. This command is used to display text outputs using the HTML element.
  9. You can display text, a variable, numbers, or a math equation.
    • For example, type "document.getElementById("demo").innerHTML = 27 + 33;" to print the sum of 27 + 33.
  10. This tag closes your Javascript code. Type this tag when you are finished, and enter all your lines of JavaScript. When you load the HTML document in a web browser, it will print inside the HTML document.
    11. Advertisement
Method 2
Method 2 of 4:

Using a Window Alert

PDF download Download Article
  1. This is the opening tag for your Javascript.
  2. This is the JavaScript command to open a pop-up window alert.
  3. You can type text, a variable, numbers, or a math equation. For example, "alert("Hello Sweety!")" to display "Hello Sweety!" in a pop-up window.
  4. This closes your line of JavaScript. The entire line should look something like "alert("Hello Sweety!");".
  5. This tag closes your JavaScript code. Type this tag when you are finished entering all your lines of JavaScript. Loading your HTML document in a web browser will display the text you want to print in a pop-up window.
    • You can also create a button that displays printed text in a pop-up window. To do so, type "<button type="button" onclick="alert([text you want to display])">Button text</button>".
    6. Advertisement
Method 3
Method 3 of 4:

Using Console Log

PDF download Download Article
  1. This is the opening tag for your JavaScript.
  2. This is the javascript command for a console log. A console log is the closest thing to a Print command in the typical coding sense. It doesn't display text on your web page, but it does display text inside the console when you run your HTML/JavaScript inside a web browser. This is useful for debugging.
  3. It can be text (a string), a variable, numbers, or a math equation. For example, "console.log(I am printing in Javascript).
  4. This closes your line of JavaScript. The entire line should look something like "nowiki>console.log(I am printing in JavaScript)</nowiki>
  5. This tag closes your Javascript code. Type this tag when you are finished entering all your lines of JavaScript.
  6. Use the following steps to save your HTML document.
    • Click File at the top of your text editor or HTML editing program.
    • Click Save as .
    • Type a file name for the HTML document.
    • Ensure it saves as a ".html" document.
    • Click Save .
  7. Open any web browser of your choice and type the file location of the HTML document in the address bar at the top. This will open the HTML document in your web browser.
  8. This opens Developer Mode in your web browser. You will see a new window displaying the HTML, CSS, and Javascript code.
  9. It's at the top of the developer mode window.
  10. It's the icon that resembles a circular arrow at the top of your web browser. This reloads the HTML document in the web browser. As the web browser processes the HTML and JavaScript, it will display the console log text inside the console in the Developer Mode window.
    11. Advertisement
Method 4
Method 4 of 4:

Printing on a Printer

PDF download Download Article
  1. This is the opening HTML tag to create a button within your HTML.
  2. The "window.print()" command is the JavaScript command to print the contents of your web browser window. The bracket (>) finishes the opening tag of the HTML button.
  3. This should go right after the bracket (>). For example, you could type "Click here to print" or something similar.
  4. This closes out the HTML button element. When you render your HTML in a web browser, it will create a button you can click to print the contents of your web browser. [1]
    5. Advertisement

Expert Q&A

Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!

      You Might Also Like

      How to
      Turn On JavaScript
      How to
      Enable Webgl
      How to
      Disable JavaScript
      How to
      Enable JavaScript in a Browser on a Mac
      How to
      Use JavaScript Injections
      How to
      Enable JavaScript in Mozilla Firefox
      How to
      Change Button Color in Javascript
      How to
      Make a JavaScript Image Rollover
      How to
      Program Using Javascript
      Simple Ways to Create a Javascript Console in Sublime Text
      Advertisement

      References

      1. ↑ https://www.w3schools.com/js/js_output.asp

      About This Article

      Article Summary X

      1. Type "console.log" within your Javascript elements
      2. Type what you want to print inside parenthesis after "console.log".
      3. Close the line out with a semicolon (;).
      4. Save your HTML document and load it in a web browser.
      5. Press F12 to open the Developer Mode window.
      6. Click the Console tab in the Developer Mode window.
      7. Refresh your browser.
      8. Watch the output in the Console to see what "console.log" command prints.

      Did this summary help you?
      Thanks to all authors for creating a page that has been read 72,314 times.

      Is this article up to date?

      Advertisement