如何为input元素设置由uuid.v4()生成的动态值

嘿，我来帮你搞定这个问题～

先说说你原来的两种写法为啥没生效：

• 直接在input的value属性里写uuid.v4()完全没用，因为浏览器会把这段内容当成普通字符串，根本不会执行里面的JavaScript代码；
• 你后面加的script代码没成功，大概率是俩原因：要么是脚本执行时，input元素还没被浏览器加载进DOM（比如你的script写在input标签前面了），要么是你压根没引入uuid库，浏览器根本不认识uuid这个变量。

接下来给你几个靠谱的解决方案，选哪种都能解决问题：

方案1：把脚本放在input元素后面（最省心） #

直接把script标签写在input的下方，这样浏览器执行脚本时，input已经存在于DOM里了，同时要确保uuid库已经加载完毕：

<input type="text" id="token">
<!-- 先确保uuid库已引入，不管是通过项目依赖安装，还是用script标签加载脚本文件 -->
<script>
  document.getElementById("token").value = uuid.v4();
</script>

方案2：等DOM完全加载后再执行代码 #

如果你的script标签必须放在页面头部（比如head标签里），可以用DOMContentLoaded事件包裹代码，确保所有DOM元素都加载完成后再赋值：

<head>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 等DOM加载完毕再获取元素并设置值
      document.getElementById("token").value = uuid.v4();
    });
  </script>
</head>
<body>
  <input type="text" id="token">
  <!-- 这里要加载uuid库的脚本文件 -->
</body>

方案3：给script标签加defer属性 #

defer属性会让脚本在DOM加载完成后再执行，还不会阻塞页面渲染，适合放在head标签里使用：

<head>
  <!-- 先加载uuid库脚本 -->
  <script src="你的uuid库文件路径" defer></script>
  <script defer>
    document.getElementById("token").value = uuid.v4();
  </script>
</head>
<body>
  <input type="text" id="token">
</body>

最后给你个排查小技巧：如果还是没效果，按下F12打开浏览器开发者工具，切换到「控制台」标签看看报错信息——要是显示ReferenceError: uuid is not defined，就是uuid库没引入对；要是显示TypeError: Cannot set properties of null (setting 'value')，就是脚本执行时DOM还没加载好，对应上面的方案调整就行。

备注：内容来源于stack exchange，提问作者Gilles