Download Article
Easily display text in the browser terminal, window, or browser console
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.
Steps
-
Type <p id= in the body of your HTML document. This is the opening HTML tag for paragraph text with a specific id.
- For more information on how to write HTML code, check out How to Create a Simple Web Page with HTML .
-
Type a name for the paragraph element in quotes followed by > . 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 -
Type </p> immediately after the "<p id="[id]">" tag. This adds a closing tag for the opening paragraph HTML element
-
Press ↵ Enter . This adds a new line to your HTML.
-
Type <script> and press ↵ Enter . This is the opening tag for your Javascript. All JavaScript coding should go after this tag.
-
Type document.getElementById . This is the JavaScript code to call an HTML element by its ID.
-
Type the ID of the paragraph element in quotes inside parenthesis. If your paragraph element is "<p id="math">", your JavaScript code would read "document.getElementById("math")".
-
Type .InnerHTML= after the parenthesis. This command is used to display text outputs using the HTML element.
-
Type what you want to print followed by a semicolon ( ; ). 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.
-
Press ↵ Enter and type </script> . 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.
Advertisement
-
Type <script> in the body of your HTML document. This is the opening tag for your Javascript.
-
Press ↵ Enter and type alert . This is the JavaScript command to open a pop-up window alert.
-
Type what you want to print in parentheses. 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.
-
Add a semi-colon ( ; ) at the end. This closes your line of JavaScript. The entire line should look something like "alert("Hello Sweety!");".
-
Press ↵ Enter and type </script> . 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>".
Advertisement
-
Type <script> in the body of your HTML document. This is the opening tag for your JavaScript.
-
Press ↵ Enter and type console.log . 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.
-
Type the text you want to log in parenthesis. It can be text (a string), a variable, numbers, or a math equation. For example, "console.log(I am printing in Javascript).
-
Add a semi-colon ( ; ) at the end. This closes your line of JavaScript. The entire line should look something like "nowiki>console.log(I am printing in JavaScript)</nowiki>
-
Press ↵ Enter and type </script> . This tag closes your Javascript code. Type this tag when you are finished entering all your lines of JavaScript.
-
Save your HTML document. 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 .
-
Open the HTML document in a web browser. 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.
-
Press F12 . This opens Developer Mode in your web browser. You will see a new window displaying the HTML, CSS, and Javascript code.
-
Click Console . It's at the top of the developer mode window.
-
Refresh your browser . 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.
Advertisement
-
Type <button onclick= in the body of your HTML document. This is the opening HTML tag to create a button within your HTML.
-
Type "window.print()"> after the equals (=) sign. 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.
-
Type the text you want to go into the button. This should go right after the bracket (>). For example, you could type "Click here to print" or something similar.
-
Type </button> . 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] X Research source
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
Thanks for submitting a tip for review!
References
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 70,935 times.
Advertisement
