WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript Output


JavaScript does NOT have any worked in print or show functions.


JavaScript Display Possibilities

JavaScript can "display" information in various ways:

    JavaScript can output data in different ways:

    • Use window.alert () to pop up a warning box.
    • Use the document.write () method to write content to an HTML document.
    • Use innerHTML to write to HTML elements.
    • Use console.log () to write to the browser's console.

    Using window.alert()

    You can pop up a warning box to display the data

    Example

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Web Page</h1>
    <p>My first paragraph.</p>

    <script>
    window.alert(5 + 6);
    </script>

    </body>
    </html>
    Try it Yourself »

    Using document.write()

    For testing purposes, it is advantageous to display document.write():

    Example

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Web Page</h1>
    <p>My first paragraph.</p>

    <script>
    document.write(5 + 6);
    </script>

    </body>
    </html>
    Try it Yourself »

    Using document.write() after a HTML record is completely stacked, will delete all current HTML:

    Example

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Web Page</h1>
    <p>My first paragraph.</p>

    <button onclick="document.write(5 + 6)">Try it</button>

    </body>
    </html>
    Try it Yourself »

    Using innerHTML

    To access an HTML element from JavaScript, you can use the document.getElementById ( id ) method.

    Please use the "id" attribute to identify the HTML element, and innerHTML to get or insert the content of the element:

    Example

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Web Page</h1>
    <p>My First Paragraph</p>

    <p id="demo"></p>

    <script>
    document.getElementById("demo").innerHTML = 5 + 6;
    </script>

    </body>
    </html>
    Try it Yourself »

    The above JavaScript statement (in <script> Tag) can be executed in a web browser:

    document.getElementById ("demo") is the JavaScript code that uses the id attribute to find the HTML element .

    innerHTML = "The paragraph has been modified." is used to modify the HTML content of the element (innerHTML) JavaScript code.

    In this tutorial

    In most cases, in this tutorial, we will use the method described above to output:

    The above example directly puts id = "demo" <p> Element to HTML document output:

    Using console.log()

    If your browser supports debugging, you can use console.log () The method displays the JavaScript value in the browser.

    Use F12 in your browser to enable debug mode, click in the debug window "Console" menu.

    Example

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Web Page</h1>
    <p>My first paragraph.</p>

    <script>
    console.log(5 + 6);
    </script>

    </body>
    </html>
    Try it Yourself »