将函数存储在变量中于HTML调用时无法正常生成随机码的问题

代码存在4处逻辑/写法错误，和JS是否放在独立文件无直接关联，内嵌JS时特殊的执行时机刚好掩盖了部分问题：

• 变量赋值逻辑错误：var GFCode = codeFunc; 仅将codeFunc函数的引用赋值给变量，未执行函数，因此变量中存储的不是生成的随机码
• 随机码生成函数逻辑错误：codeFunc内通过document.write直接写入文档流，没有返回生成的字符串；如果外部JS在页面解析完成后执行，document.write会直接清空整个已加载页面，完全无法实现“存储随机码到变量”的需求
• HTML样式语法错误：文本容器的内联样式写为style="display=none;"，CSS属性赋值需用冒号分隔，正确写法为style="display:none;"，否则初始隐藏样式不生效
• 随机索引逻辑有偏差：Math.round(Math.random() * (chars.length - 1)) 会导致字符集首尾两个字符的选中概率比其他字符低50%，随机结果不均匀

JS代码（可直接存为独立JS文件引入） #

// 修正随机字符串生成逻辑，保证所有字符选中概率一致
function randomString(length, chars) {
  let result = '';
  for (let i = length; i > 0; --i) {
    result += chars[Math.floor(Math.random() * chars.length)];
  }
  return result;
}

// 直接返回拼接完成的随机码，不调用document.write
function genCode() {
  const charSet = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  return `${randomString(4, charSet)}-${randomString(4, charSet)}`;
}

function GenerateButton() {
  // 每次点击按钮生成新的随机码，若需要页面加载时就生成固定码，可把这行移到函数外全局存储
  const GFCode = genCode();
  document.getElementById("btn1id").style.display = "none";
  document.getElementById("Txt").style.display = "block";
  // 插入纯文本优先用textContent，安全性更高
  document.getElementById("code").textContent = GFCode;
}

HTML代码 #

<div class="btn0" id="btn1id" onclick="GenerateButton()">Generate</div>
<!-- 修正style里的赋值符号为冒号 -->
<div class="Txt" id="Txt" style="display:none;"> The Code is: <span id="code"></span></div>

• 若将JS放在<head>中引入，需要给script标签加defer属性，保证DOM加载完成后再执行JS，否则getElementById会找不到对应元素报错
• 若不需要延迟执行，可直接把script引入标签放在</body>标签之前，无需额外加属性
• 非必要不要使用document.write，该API仅适合页面初始解析阶段插入内容，页面加载完成后调用会覆盖整个文档

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