Best way to output Javascript?

Question

I am learning Javascript and I see that the preferred method to output codes is the document.getElementById... and Document.write should only be used in testing...

Is that the best way to output any script? What's the code doing exactly? I wrote the following code and I'm not sure how "demo" comes into play and why is it necessary...

<html>
    <head>
        <script>

            function addNumbers(arr){
                 var i, answer =0;

                 for(i=0; i<arr.length; i++){
                     answer += arr[i];

                 }
                 return answer;
            }

        </script>
    </head>

    <body>

        <h4> Function addNumbers: </h4>

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

        <script> 

            var myArray = [1,2,3,4,5,6,7,8,9];
            document.getElementById("demo").innerHTML = addNumbers(myArray); 

        </script>

    </body>
</html>

Why do you want to display your code results (especially when you are doing array operations) in the DOM? The console was made for it. — kind user, Jul 29 '17 at 23:16
@Kinduser it's for a class, I need to display the function >. — Antoine B, Jul 29 '17 at 23:23
@AntoineB Just `console.log` it. That's exactly what it's for. — Carcigenicate, Jul 29 '17 at 23:26
@Kinduser I tried using it like this console.log(addNumbers(myArray)); but nothing is displayed on the output — Antoine B, Jul 29 '17 at 23:30
@AntoineB That's because console.log doesn't return anything. Save the result of `addNumbers` into a variable, log the variable, then assign it to `innerHTML`. — Carcigenicate, Jul 29 '17 at 23:36
`console.log()` only outputs to the browser console. [directions](https://developers.google.com/web/tools/chrome-devtools/console/) — John C, Jul 29 '17 at 23:37

score 1 · Accepted Answer · answered Jul 30 '17 at 00:27

One step back, two steps forward:

document.write is one of a set of three functions

document.open() opens a document for writing from scratch, deleting existing document content if there is any.
document.write( string) inserts a string into the character stream used to construct the web page.
document.close() closes a document for writing. Any further writes will re-open the document and wipe out existing content in the process.

Now take into consideration

At the end of the page input stream, the document is automatically closed.
Documents are constructed using a "Document Object Model" ("DOM") which can be accessed and manipulated from within script.
document.open/write/close originated before the DOM was standardized and became available for use.

So document.write has little use in modern web programming. It wipes the page out if used after a page has finished loading. It is almost entirely restricted to tutorials for students who haven't learned the DOM exists yet, and occasionally when programmatically writing the content of a child window opened with window.open.

All the HTML elements in a page exist as HTMLelement nodes in the DOM. These can be accessed by calling methods such as document.getElementById or document.querySelector and are returned as JavaScript object values. HTMLElements differ according to tag type, but if they represent an HTML container element, have properties such as innerHTML and textContent which, when updated with text strings in script, change the content of the rendered page.

In answer to your question, "demo" is the id value of an HTMLParagraphElement, where id values are used to access particular element in the DOM - id values should be unique among page HTMLElements.

The (paragraph) element object is obtained by querying the DOM using document.getElementById. Changing the elements innerHTML content subsequently causes the document to be re-rendered with the new content, updating display of the page.

Thank you so much for this answer. The class I'm taking is the basic introductory class to HTML/CSS/JS & now it makes sense why they're asking us to use document.write.. Thank you — Antoine B, Jul 30 '17 at 00:34

Yolo · Answer 2 · 2017-07-29T23:56:07.270

Demo refers to the paragraph with id "demo". You use ids (which must be unique across a HTML page) to identify and use html tags in your javascript.

document.write is indeed not used very often anymore. There are multiple reasons why. Since it is well explained on the net, have a look at these answers or this article.

Your code works fine if you add some missing tags like </head>,<body> and <script> and the console log is happening. Run at the snippet below.

As a sidetone it is better practice nowadays to do your javascript stuff and loading at the bottom of the page right before the closing </body> tag. Since any loading happens after the DOM is loaded.

function addNumbers(arr) {
  var i, answer = 0;

  for (i = 0; i < arr.length; i++) {
    answer += arr[i];

  }
  return answer;
}

var myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

document.getElementById("demo").innerHTML = addNumbers(myArray);

console.log(addNumbers(myArray))

<html>

<head>

</head>

<body>

  <h4> Function addNumbers: </h4>

  <p id="demo">This is a paragraph that can be identified using the id attribute.</p>

</body>

</html>

Abdul Aleem Khan · Answer 3 · 2017-07-29T23:47:27.377

Your code is running just fine. Check it out below. I don't see any problems here. If you want to display the result on the page inside element with demo id, then it is working just fine that is the way to do it. If you want to print your value in the console then console.log is the right way to do it. And for that just pass the function to console.log(addNumbers(myArray)) after declaring this array var myArray = [1,2,3,4,5,6,7,8,9]; in your code.

<html>
    <head>
        <script>

            function addNumbers(arr){
                 var i, answer =0;

                 for(i=0; i<arr.length; i++){
                     answer += arr[i];

                 }
                 return answer;
            }

        </script>
    </head>

    <body>

        <h4> Function addNumbers: </h4>

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

        <script> 

            var myArray = [1,2,3,4,5,6,7,8,9];
            document.getElementById("demo").innerHTML = addNumbers(myArray); 

        </script>

    </body>
</html>

This entirely misses the question. Nowhere does he say that the code is broken. Also, if you're just copying his code, that's not an answer. — Carcigenicate, Jul 29 '17 at 23:41
I posted it so that he could run it with "Run code snippet" button. Anyhow I thought I was helping. — Abdul Aleem Khan, Jul 29 '17 at 23:51
I will be trying a litter better next time. I know its very critical community. — Abdul Aleem Khan, Jul 29 '17 at 23:52

Best way to output Javascript?

3 Answers3