JavaScript output


JavaScript does not have any printing or output functions.

JavaScript displays data

JavaScript can output data in different ways:

  • Use window.alert() Popup Warning box.

  • Use the document.write() method to write the content into the HTML document.

  • Use innerHTML to write to HTML elements.

  • Use console.log() to write to the browser's console.

Use window.alert()

You can pop up an alert box to display data:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
	
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
	
</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

Manipulate HTML elements

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

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
	
</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

The above JavaScript statements (in the <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 (innerHTML) of the element JavaScript code.

In this tutorial

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

The following example directly Write the <p> element with id="demo" to the HTML document output:

Write to HTML document

For testing purposes, you can write JavaScript directly in HTML In the document:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
	
</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance



Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() 
{
    document.write(Date());
}
</script>
	
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Write to the console

If your browser supports debugging, you can use the console.log() method to display it in the browser JavaScript value.

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
	
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Instance console screenshot:

QQ截图20161017131243.png

Do you know?

Note## Please use document.write() to only write content to the document output.

If document.write is executed after the document has finished loading, the entire HTML page will be overwritten.

Note Debugging in a program is the process of testing, finding and reducing bugs (errors).