简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rewritten title: How to best output JavaScript?
P粉969253139
P粉969253139 2023-08-14 11:27:09
0
2
414
<p>I'm learning JavaScript and I saw that the recommended way to output code is to use document.getElementById..., and Document.write should only be used in tests...</p> <p>Is this the best way to output any script? What exactly does this code do? I wrote the following code, not sure how "demo" works and why it is necessary... </p> <pre class="brush:php;toolbar:false;"><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></pre> <p><br /></p>
P粉969253139
P粉969253139

reply all(2)
P粉827121558
P粉8271215582023-08-15 10:45:51 2 floor

Demo refers to the paragraph with the id "demo". You can use an id (which must be unique throughout the HTML page) to identify and use html tags in javascript.

document.write is indeed no longer used very often. There are several reasons. Since there are good explanations on the web, check out these answers or this article.

If you add some missing tags like </head>, <body> and <script>, your code will is working fine and console logging is happening. Run the code snippet below.

As a side note, best practice now is to do javascript processing and loading at the bottom of the page before closing the </body> tag. Because 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>
Like +0
Add Reply
P粉757432491
P粉7574324912023-08-15 09:16:35 1 floor

One step back, two steps forward:

document.write is one of the three functions

  • document.open() Opens a document for writing from the beginning, deleting existing document content if any exists.
  • document.write( string) Inserts a string into the character stream used to build a web page.
  • document.close() Closes a document for writing. Further writing will reopen the document and clear existing content in the process.

Now consider the following

  1. At the end of the page input stream, the document will automatically close.
  2. Documents are built using the "Document Object Model" ("DOM"), which can be accessed and manipulated from scripts.
  3. document.open/write/close Existed before the DOM was standardized and available.

Therefore, document.write has little use in modern web programming. If used after the page has finished loading, it clears the page content. It is almost entirely limited to tutorials for students who have not yet learned that the DOM exists, and occasional use when writing content programmatically in a child window opened with window.open.

All HTML elements in the page exist as HTMLelement nodes in the DOM. These elements can be accessed by calling methods such as document.getElementById or document.querySelector, and returned as JavaScript object values. HTMLElement varies depending on the tag type, but if they represent an HTML container element, have attributes such as innerHTML and textContent, which when updated with a text string from a script, Changes the content of the rendered page.

To answer your question, "demo" is the id value of HTMLParagraphElement, where the id value is used to access a specific element in the DOM - the id value should be unique among page HTMLElements of.

The (paragraph) element object can be obtained by querying the DOM using document.getElementById. Subsequent changes to the element's innerHTML content will cause the document to re-render with the new content, updating the page's display.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！