如何将JavaScript字符串变量传递至HTML表单输入框并解决赋值失效问题

嘿，我看到你的问题了——你写的代码没法把用户输入的名字数组填充到页面的只读输入框里对吧？咱们来拆解下问题根源，再给你修复方案。

核心问题：脚本执行时机不对 #

你的JavaScript代码放在了<head>标签里，而浏览器是从上到下解析HTML文档的：当脚本运行时，<body>里的那些<input>元素还没被创建出来呢！这时候document.getElementById()根本找不到对应的元素，赋值操作自然就没效果了。

两种靠谱的解决办法 #

方法1：把脚本移到<body>末尾 #

这是最简单直接的方式，等所有DOM元素都加载完成后再执行脚本：

<!DOCTYPE html>
<html>
<head>
    <title>Arrays of Js</title>
    <h3>Arrays usage by AFRN</h3>
    <noscript>JS not supported</noscript>
</head>
<body bgcolor="yellow">
    <form name="arryForm">
        <input type="text" id='r1' name="a1" readonly="true">
        <input type="text" id='r2' name="a2" readonly="true">
        <input type="text" id='r3' name="a3" readonly="true">
        <input type="text" id='r4' name="a4" readonly="true">
        <input type="text" id='r5' name="a5" readonly="true">
    </form>

    <!-- 把脚本移到body最后，确保DOM已加载 -->
    <script>
        alert('hey');
        var names = [];
        for(var i = 0; i <= 4; i++){
            names[i] = prompt('enter name: ');
        }

        // 优化：用循环代替重复的getElementById，更简洁
        var ids = ['r1','r2','r3','r4','r5'];
        for(var i = 0; i <= 4; i++){
            document.getElementById(ids[i]).value = names[i];
        }
    </script>
</body>
</html>

方法2：使用DOMContentLoaded事件 #

如果你不想移动脚本位置，可以监听DOMContentLoaded事件，确保DOM加载完成后再执行操作：

<!DOCTYPE html>
<html>
<head>
    <title>Arrays of Js</title>
    <h3>Arrays usage by AFRN</h3>
    <script>
        // 监听DOM加载完成事件
        document.addEventListener('DOMContentLoaded', function() {
            alert('hey');
            var names = [];
            for(var i = 0; i <= 4; i++){
                names[i] = prompt('enter name: ');
            }

            var ids = ['r1','r2','r3','r4','r5'];
            for(var i = 0; i <= 4; i++){
                document.getElementById(ids[i]).value = names[i];
            }
        });
    </script>
    <noscript>JS not supported</noscript>
</head>
<body bgcolor="yellow">
    <form name="arryForm">
        <input type="text" id='r1' name="a1" readonly="true">
        <input type="text" id='r2' name="a2" readonly="true">
        <input type="text" id='r3' name="a3" readonly="true">
        <input type="text" id='r4' name="a4" readonly="true">
        <input type="text" id='r5' name="a5" readonly="true">
    </form>
</body>
</html>

额外优化点 #

你原来注释掉的循环代码其实思路是对的，只是犯了个小错误：document.getElementById(ids)里直接传了整个数组，应该传ids[i]，改成上面代码里的写法就能正常运行了，这样比重复写五次document.getElementById()要简洁得多。

内容的提问来源于stack exchange，提问作者A.F.R.N