按钮调用matchHouses函数输出始终为1的问题求助

核心错误点 #

• 输入值获取方式错误：input元素的内容存在value属性里，不是innerHTML，你一开始用innerHTML拿到的是空字符串。
• 变量时机错误：页面加载时就获取step值，此时输入框为空；应该在点击按钮触发myFunction时，实时读取当前输入内容。
• parseInt未赋值：parseInt(step)不会自动修改原变量，必须把转换后的值重新赋值给step。
• 循环逻辑隐患：如果step是NaN（比如输入非数字），num != NaN永远为false，循环不会执行，直接返回初始值1。

修正后的代码 #

HTML部分（无需修改）

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <input type = "text" name = "step" id = "step">
        <button onclick="myFunction()">Submit</button>
        <p id = "demo"></p>
    </body>
</html>

JavaScript部分

function matchHouses(step) {
    // 用公式替代循环，更高效简洁，完全符合你的需求
    return 1 + 5 * step;
}

function myFunction(){
    // 点击时实时获取输入框内容
    const inputValue = document.getElementById("step").value;
    // 转换为十进制整数，第二个参数10避免进制歧义
    const step = parseInt(inputValue, 10);
    
    // 增加输入合法性校验
    if (isNaN(step) || step < 1) {
        document.getElementById("demo").innerHTML = "请输入大于等于1的有效数字";
        return;
    }
    
    document.getElementById("demo").innerHTML = matchHouses(step);
}

补充说明 #

• 把获取输入值的逻辑移到myFunction内部，确保每次点击都拿到最新的用户输入。
• 替换循环为数学公式，既满足输入1得6、输入2得11的要求，又比循环更易读高效。
• 增加合法性判断，避免非数字输入导致的异常输出。

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