如何不使用全局变量关联局部变量至其他函数，并实现三函数联动计算输出

一、不使用全局变量关联局部变量的方法 #

• 闭包：将需要共享局部变量的函数嵌套在同一个父作用域中，内部函数可访问父作用域的变量，即使父函数执行完毕，内部函数依然能保留对该作用域的引用。
• DOM关系查找：通过元素的父子/兄弟关系（比如parentElement、querySelector）在事件处理函数中获取目标元素，无需提前保存变量。
• 参数传递：将局部变量作为参数传递给需要使用它的函数。

二、修复代码实现函数联动 #

原代码存在DOM事件调用错误、局部变量跨函数无法访问、输入值未转数字、未初始化创建输入框等问题，以下是修复后的完整代码：

HTML #

<div id="rowContainer"></div>

JavaScript #

function mathFormula(x, y) {
    // 转换输入值为数字，避免字符串拼接
    const numX = Number(x);
    const numY = Number(y);
    // 处理非数字输入的情况
    if (isNaN(numX) || isNaN(numY)) {
        return "请输入有效数字";
    }
    return numX * numY;
}

const mainDiv = document.getElementById("rowContainer"); 

function newRow() {
    const input1 = document.createElement("input");
    input1.type = "number"; // 设置为数字输入框，优化输入体验
    mainDiv.appendChild(input1);
    
    const input2 = document.createElement("input");
    input2.type = "number";
    mainDiv.appendChild(input2);
    
    const result = document.createElement("div");
    mainDiv.appendChild(result);

    // 利用闭包直接访问当前row的局部元素，绑定输入事件
    function calculateResult() {
        const calculation = mathFormula(input1.value, input2.value);
        result.textContent = calculation;
    }
    input1.addEventListener("keyup", calculateResult);
    input2.addEventListener("keyup", calculateResult);
}

// 调用函数初始化第一组输入框
newRow();

关键修复说明 #

1. 闭包应用：在newRow内部定义事件处理函数calculateResult，直接访问当前作用域的input1、input2、result，无需全局变量。
2. 事件绑定修正：使用标准的addEventListener绑定事件，替换原错误的调用方式。
3. 输入校验与转换：在计算函数中转换输入值为数字，并处理非数字输入的提示，避免计算错误。
4. 初始化执行：调用newRow()生成输入框，确保页面加载后有可交互元素。

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