使用<script>修改input的value后页面未显示，如何修复？

你的JavaScript代码写在<input>元素之前，浏览器执行脚本时，页面上的<input id="idn_id">还未被解析加载，document.getElementById("idn_id")会返回null，因此无法设置它的value属性。

有三种常用解决方式：

1. 调整脚本位置到<input>之后 #

让浏览器先解析input元素，再执行脚本：

<p><input type="text" placeholder="Results" name="idn" id="idn_id"></p> 
<script>
   var idn_text = "123"
   document.getElementById("idn_id").value = idn_text
</script>

2. 监听DOM加载完成事件 #

通过DOMContentLoaded事件，让脚本等待整个DOM树加载完成后再执行，不受脚本位置限制：

<script>
   document.addEventListener('DOMContentLoaded', function() {
       var idn_text = "123"
       document.getElementById("idn_id").value = idn_text
   });
</script>
<p><input type="text" placeholder="Results" name="idn" id="idn_id"></p> 

3. 将脚本放在<body>标签末尾 #

把脚本放在页面所有内容的最后，确保所有DOM元素都已加载完毕：

<body>
    <p><input type="text" placeholder="Results" name="idn" id="idn_id"></p> 
    <!-- 其他页面内容 -->
    <script>
       var idn_text = "123"
       document.getElementById("idn_id").value = idn_text
    </script>
</body>

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