基于HTML&JS生成并展示数组输出的问题排查与修正

问题说明 #

需要通过用户输入生成格式为 [100, 100, 200, 200, 300, 500, 900, 1500, 2400, 3800, 6100] 的数组，但现有代码无法输出预期结果，当前输出为 [ 100, 100, 200, 0, 0, 0, 0, 0, 0, 0, 0,]。

修改后的完整代码 #

<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
</head>
<body style="text-align: center;">
    <h3 id="po">Input Array Elements</h3>
    <form class="" action="index.html" method="post">
        <input type="text" name="array[]" value="100" /><br>
        <input type="text" name="array[]" value="100" /><br>
        <input type="text" name="array[]" value="200" /><br>
        <button type="button" name="button" onclick="createArray()">
            Submit
        </button>
    </form>
    <br>
    <p id="par"></p>
    <script type="text/javascript">
        function createArray() {
            // 收集输入的数值，转为数字类型存入数组
            const inputs = document.getElementsByName('array[]');
            const resultArray = Array.from(inputs).map(input => Number(input.value));
            
            // 补充元素直到数组长度为11，规则是每个新元素等于前两个元素之和
            while (resultArray.length < 11) {
                const last = resultArray[resultArray.length - 1];
                const secondLast = resultArray[resultArray.length - 2];
                resultArray.push(last + secondLast);
            }
            
            // 格式化为目标字符串
            const outputStr = `Source Array is [${resultArray.join(', ')}]`;
            
            // 更新页面内容
            document.getElementById('par').innerHTML = outputStr;
            document.getElementById("po").innerHTML = "Output";
        }
    </script>
</body>
</html>

关键修改点 #

• 数值化处理输入：将输入框的字符串值转为数字，避免后续计算时出现字符串拼接错误。
• 正确的元素生成逻辑：当数组长度不足11时，取数组最后两个元素求和得到新元素，匹配目标数组的规律。
• 简化字符串格式化：使用数组的join(', ')方法生成标准的逗号分隔格式，避免手动拼接时出现多余逗号或空格的问题。

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