JavaScript output

JavaScript can output data in 4 different ways:

Use window.alert() to pop up an alert 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.

#window.alert()

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
 <script src="/static/js/abc.js"></script><script>
    function myFunction()
    {
    window.alert("Hello! 这是一个按钮");
    }
 </script>
</head>
<body>
  <input type="button" onclick="myFunction()" value="Show alert box">
</body>
</html>

document.write()

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
      <h1>Head</h1>
    <script>
        document.write('<p>hello document</p>');
    </script>
    <h2>Tail</h2>
</html>

innerHTML

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
    function getInnerHTML(){
    alert(document.getElementById("test").innerHTML);
    }
</script>
</head>
<body>
   <p id="test"><span color="#000">php中文网</span></p>
  <input type="button" onclick="getInnerHTML()" value="点击" />
</body>
</html>

console.log()

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

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
 </head>
<body>
<p>在浏览器中使用F12来调试，在调试窗口中点击 "Console"</p>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="/static/js/abc.js"></script><script> function myFunction() { window.alert("Hello! 这是一个按钮"); } </script> </head> <body> <input type="button" onclick="myFunction()" value="Show alert box"> </body> </html>

submit Reset Code

Automatic operation

JavaScript output

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]