浏览器HTML显示内的JavaScript函数

Question

我的JavaScript代码有问题。 我正在尝试在浏览器中输出总和，但是它不起作用。 我尝试了各种在JavaScript中显示消息的方式： console.log() ， document.write() ， document.getElementById() 。 这些似乎都不起作用。 我的代码看起来还不错，但根本不会输出任何内容。 有人能帮助我吗？

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
  <head>
   <script type="text/javascript">
     var sum = 0;
     for(var i = 0; i < 1000; i++){ 
        if(i%3 === 0 || i%5 === 0)   
        {
           sum += i; 
        }
        console.log('The sum is' + " " +sum);
     }
   </script>
  </head>
</html>

Answer 1

此代码在这里可以正常工作。 我正在运行IE11，总和显示在控制台中没有问题。 请参见下面的代码段； 一切都没有改变。

也许您只需要打开开发控制台？ IE / Edge中的F12 ，或Chrome中的设置>开发人员工具>控制台 （我认为）。

 <!DOCTYPE html> <meta charset="UTF-8"> <html> <head> <script type="text/javascript"> var sum = 0; for (var i = 0; i < 1000; i++) { if (i % 3 === 0 || i % 5 === 0) { sum += i; } console.log('The sum is' + " " + sum); } </script> </head> </html> 

如果要将代码输出到浏览器窗口，可以执行以下操作，将结果添加到DOM：

 <!DOCTYPE html> <meta charset="UTF-8"> <html> <head> </head> <body> <div id='resultsDiv'> <h3>Results Here:</h3> </div> <script type="text/javascript"> var sum = 0; var resultsDiv = document.getElementById('resultsDiv'); for (var i = 0; i < 1000; i++) { if (i % 3 === 0 || i % 5 === 0) { sum += i; } resultsDiv.innerHTML += 'The sum is' + " " + sum + "<br />"; } </script> </body> </html> 

Answer 2

好吧，你写过你想在浏览器中显示，我假设你的意思是视口

首先，您需要一个body标签：

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>

<body></body>

</html>

当然，JavaScript可以位于HEAD标记内，但是如果您希望显示任何内容，则需要将其放在BODY标记内。

其次，console.log会将结果打印到控制台，如果要在正文中打印总和，则应将“打印”部分更改为类似

document.getElementsByTagName('body').innerHTML = 'The sum is' + " " + sum;

要么

document.getElementById('sum').innerHTML = 'The sum is' + " " + sum;

其中sum将是添加到body标签的id属性，

<meta charset="UTF-8">

进入HEAD标记内，最后但并非最不重要的一点是，您正在立即执行javascript，因此不一定要加载DOM，建议您在body标记中创建一个称为onload的javascript函数作为属性。

因此，有效的实现可能是这样的：

 function sum(){ var sum = 0; for (var i = 0; i < 1000; i++) { if (i % 3 === 0 || i % 5 === 0) { sum += i; } console.log('The sum is' + " " + sum); } document.getElementById('sum').innerHTML = 'The sum is ' + sum } 

 <body id="sum" onload="sum()"></body> 

该代码将如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">
            function sum(){

                var sum = 0;
                    for (var i = 0; i < 1000; i++) {
                        if (i % 3 === 0 || i % 5 === 0) {
                            sum += i;
                        }
                        console.log('The sum is' + " " + sum);
                    }
                //document.getElementsByTagName('body').innerHTML = 'The sum is ' + sum
                document.getElementById('sum').innerHTML = 'The sum is ' + sum
            }
        </script>
    </head>
    <body id="sum" onload="sum()"></body>
</html>