JavaScript实现FizzBuzz时数组结果无法在HTML页面显示求助

• 脚本执行时机错误：你将JS文件在head标签中引入，脚本执行时页面body还未完成渲染，document.getElementById("output")无法获取到对应DOM元素，返回值为null，后续操作自然无效。
• DOM操作语法错误：document.getElementById()返回的是DOM元素对象，不能直接给这个对象赋值来修改显示内容，需要操作它的内容属性（常用的有textContent/innerHTML）。

你尝试的三种写法均不满足DOM操作规范：

• 前两种写法都是直接给DOM元素对象赋值，不属于修改元素显示内容的正确语法
• 第三种写法缺少要调用的属性/方法名，属于基础语法错误

第一步：调整脚本加载时机 #

两种方案二选一即可：

1. 将HTML中引入JS的<script>标签移动到</body>闭合标签之前，保证DOM元素渲染完成后再执行脚本，修正后的HTML代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Fizz Buzz Challenge</title>
    </head>
    <body>
        <h2>The Fizz Buzz Test:</h2>
        <div id = "output"> </div>
        <script src="fizzBuzz.js" charset="utf-8"></script>
    </body>
</html>

2. 保留script在head中，添加defer属性，浏览器会自动等待DOM加载完成后再执行该脚本：

<script src="fizzBuzz.js" charset="utf-8" defer></script>

第二步：修正JS中的DOM操作代码 #

将JS文件最后一行的赋值代码替换为以下内容即可正常显示结果：

// 逗号分隔平铺展示
document.getElementById("output").textContent = result.join(', ');

如果需要每个结果单独换行展示，可使用以下写法：

document.getElementById("output").innerHTML = result.join('<br>');

内容的提问来源于stack exchange，提问作者notaverygoodprogrammer