Sublime下JS报ReferenceError: document is not defined错误求助

问题根因 #

• document是浏览器环境内置的DOM全局对象，仅在浏览器加载页面脚本时存在。你当前是直接调用Node.js环境运行独立的PasswordGen.js文件，Node运行时没有提供这个对象，因此触发未定义报错。
• 你的HTML代码存在一处语法笔误：按钮的onclick属性多写了一个闭合双引号，即使在浏览器打开也可能导致点击事件无法正常触发。

修复步骤 #

• 停止直接用Node运行该JS文件：这是前端页面脚本，不是Node服务端脚本，正确运行方式是找到同目录下的HTML文件，双击用浏览器打开即可，所有DOM相关代码会在浏览器环境下正常执行。
• 修正HTML笔误，将按钮行的多余引号删除，修正后代码如下：

  <button onclick="generatePassword()">Generate passwords</button>
  

• （可选）如果需要在Sublime Text内快速预览页面，可以安装对应的浏览器预览插件，写完代码直接唤起默认浏览器打开HTML文件即可，不要使用Node类运行工具执行带DOM操作的前端脚本。

相关代码参考 #

JavaScript 代码（PasswordGen.js） #

const characters =   ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "-", "+", "=", "{", "[", "}", "]", ",", "|", ":", ";", "<", ">", ".", "?",
  "/"
];

let boxoneEl = document.getElementById("boxOne-el")
let boxtwoEl = document.getElementById("boxTwo-el")
let Length = 15

function getPasswordNumbers() {
  let randomIndexOne = Math.floor(Math.random() * characters.length)
  return characters[randomIndexOne]
}


function generatePassword() {
  let password1 = ""
  let password2 = ""
  for (let i = 0; i < Length; i++) {
    password1 += getPasswordNumbers()
    password2 += getPasswordNumbers()
  }
  boxoneEl.textContent = password1
  boxtwoEl.textContent = password2
}

HTML 代码 #

<html>
<head>
  <link rel="stylesheet" href="PasswordGen.css">
</head>
<body>
  <button onclick="generatePassword()">Generate passwords</button>
  <h1> Generate a</h1>
  <h2>random password</h2>
  <h3>Never use an insecure password again.</h3>
  <h4 id="boxOne-el"></h4>
  <h5 id="boxTwo-el"></h5>
  <script src="PasswordGen.js"></script>
</body>
</html>

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