如何将JavaScript函数中的变量传递给另一个JavaScript函数？

方法1：使用全局变量 #

在函数外部定义全局变量存储滑块对应的密码长度，在sliderControl中实时更新该变量，generatePassword直接读取这个全局变量即可：

// 全局变量存储密码长度
let passwordLength;

function sliderControl() {
    var slider = document.getElementById("slider");
    var output = document.getElementById("output");
    // 初始化全局变量
    passwordLength = slider.value;
    output.innerHTML = passwordLength;
    slider.oninput = function() {
        passwordLength = this.value;
        output.innerHTML = passwordLength;
    };
}
sliderControl();

function generatePassword() {
    // 将字符串转为数字类型
    const length = parseInt(passwordLength);
    // 这里编写生成密码的逻辑
    console.log(`生成长度为${length}的密码`);
}

方法2：直接从DOM元素获取值 #

不需要额外变量，调用generatePassword时直接读取滑块的当前值（比读取output内容更可靠，因为滑块本身是数据源头）：

function sliderControl() {
    var slider = document.getElementById("slider");
    var output = document.getElementById("output");
    output.innerHTML = slider.value;
    slider.oninput = function() {
        output.innerHTML = this.value;
    };
}
sliderControl();

function generatePassword() {
    // 直接获取滑块的当前值并转为数字
    const length = parseInt(document.getElementById("slider").value);
    // 生成密码逻辑
    console.log(`生成长度为${length}的密码`);
}

方法3：让sliderControl提供获取长度的方法 #

改造sliderControl，使其返回包含获取当前长度的方法的对象，实现更封装的调用方式：

function sliderControl() {
    var slider = document.getElementById("slider");
    var output = document.getElementById("output");
    output.innerHTML = slider.value;
    slider.oninput = function() {
        output.innerHTML = this.value;
    };
    // 返回获取长度的方法
    return {
        getCurrentLength: function() {
            return parseInt(slider.value);
        }
    };
}
const sliderManager = sliderControl();

function generatePassword() {
    const length = sliderManager.getCurrentLength();
    // 生成密码逻辑
    console.log(`生成长度为${length}的密码`);
}

注意事项 #

• 必须将获取到的字符串值转为数字类型（用parseInt），因为滑块值和output内容都是字符串，生成密码时需要数字类型的长度参数。
• 优先读取滑块的value而非output的内容，避免显示内容和实际滑块值不一致的情况。

内容的提问来源于stack exchange，提问作者harsh.rupapara141