Javascript新手求助：如何将输入框文本传入函数参数

嘿，我来帮你搞定这个问题！你的代码现在有几个关键问题导致输入框的内容传不到fibo函数里，咱们一个个拆解解决：

核心问题分析 #

1. 脚本执行时机不对：你把获取输入框值的代码直接写在<head>的脚本里了——这时候浏览器还没渲染<body>里的输入框元素，document.getElementById('Largo')根本找不到目标元素，自然拿不到值。
2. 缺少触发逻辑：页面一加载就执行计算逻辑，但用户还没来得及输入内容，得等用户完成输入后（比如点击按钮、按下回车）再触发函数。
3. 类型不匹配：输入框的value返回的是字符串类型，直接传给fibo的话，循环里的c < num比较会出问题，得转成数字才行。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Ambiente Web</title>
    <script type="text/javascript">
        function fibo(num) {
            var f = [];
            // 先做输入合法性校验，避免非法值导致报错
            if (typeof num !== 'number' || num < 0 || !Number.isInteger(num)) {
                return ["请输入一个非负整数哦"];
            }
            for (var c = 0; c < num; c++) {
                f.push((c < 2) ? c : f[c-1] + f[c-2]);
            }
            return f;
        }

        // 定义触发计算的函数，用户操作后才执行
        function calculateFibo() {
            // 此时DOM已完全加载，能正常获取输入框元素
            var inputBox = document.getElementById('Largo');
            // 把输入的字符串转成整数，第二个参数10是十进制标识
            var inputNum = parseInt(inputBox.value, 10);
            var fiboResult = fibo(inputNum);
            // 用join把数组转成换行分隔的字符串，显示更清晰
            document.getElementById("textarea").value = fiboResult.join('\n');
        }
    </script>
</head>
<body>
    <input type="text" placeholder="请输入非负整数" id="Largo" name="largo del arreglo">
    <!-- 添加按钮触发计算，用户点击后才执行逻辑 -->
    <button onclick="calculateFibo()">生成斐波那契数列</button>
    <textarea id="textarea" rows="10" cols="30"></textarea>
</body>
</html>

关键修改说明 #

• 新增了calculateFibo函数，通过按钮的onclick事件触发，确保用户输入后才执行计算。
• 给fibo函数加了合法性校验，避免用户输入非数字、负数或小数时出现异常。
• 用parseInt把输入框的字符串值转成整数，保证循环逻辑正常运行。
• 把textarea的内容设置从innerHTML改成value，这是操作表单元素内容的标准方式。
• 给输入框加了placeholder提示，优化用户体验。

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