Javascript将变量从一个函数传递到另一个函数并通过btn触发它

时间:2015-07-27 19:55:22

标签: javascript function scope

首先是小提琴: https://jsfiddle.net/p9yfczh7/1/
/编辑/
没有“var”的小提琴两个,仍然不起作用: https://jsfiddle.net/p9yfczh7/2/

(function(){

var f;

two(1, 2); // 2 is the future "I need this"

window.onload = function () {
    document.getElementById("clickMe").addEventListener("click", function() {
            one("A-test", "B-test", "C-test", f);
        }, false);
    }

function three(f) {
    // edit remove, its a debug leftover - console.log("three:" + f);
    return f;
}

function one(a, b, c, f) {
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(f); // how do I console.log "I need this" here?
}

function two(e, f) { // I need both arguments
    var someVar = e;
    var f = "I need this";
    three(f);
 }

})();

HTML:

<button id="clickMe">ClickMe</button>

所以,我想要实现的是点击Click MeI need this打印function one。按钮是问题所在,因为如果不是按钮,我可以将one("A-test", "B-test", "C-test", f);放在function three中,这样就可以了。

我需要function two作为一个单独的函数,因为它也在其他地方使用,我也需要所有这些参数(很可能除了“b”和“c”)。

我认为这是一个范围问题。非常感谢任何帮助,谢谢!

哦,请不要jQuery。

/编辑/
这样做:
var f =“我需要这个”;
2(1); //并从function two中删除“2” 我不需要传递第二个值作为参数。

并且做window.f也不是一个好的解决方案 /编辑2 /
感谢所有有用的答案,其中一些工作在小提琴,但当我尝试将逻辑复制到我的真实代码时,该功能不起作用。这对于我想要达到的目标而言过于复杂,明天我会做更多的测试,但我认为我需要以完全不同的方式处理这个问题。

3 个答案:

答案 0 :(得分:1)

我有一个建议:

在函数二中你可以返回三个(f),然后在你的回调函数中调用两个('',f)而不是f:

(function(){

var f;

two(1, 2); // 2 is the future "I need this"

window.onload = function () {
    document.getElementById("clickMe").addEventListener("click", function() {
            one("A-test", "B-test", "C-test", two('',f);
        }, false);
    }

function three(f) {
    console.log("three:" + f);
    return f;
}

function one(a, b, c, f) {
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(f); // how do I console.log "I need this" here?
}

function two(e, f) {
    var someVar = e;
    var f = "I need this";
    return three(f);
 }

})();

答案 1 :(得分:1)

实现所需行为的一种方法是为要在单击回调函数中使用的变量使用不同的变量名称(即,不f)。按照您当前的命名惯例...... g怎么样?因此,您的JavaScript将更改为:

(function(){

var g;

two(1, 2); // 2 is the future "I need this"

window.onload = function () {
    document.getElementById("clickMe").addEventListener("click", function() {
            one("A-test", "B-test", "C-test", g);
        }, false);
}
function three(f) {
    console.log("three:" + f);
    return f;
}

function one(a, b, c, f) {
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(f); // how do I console.log "I need this" here?
}

function two(e, f) {
    var someVar = e;
    g = "I need this";
    three(g);
}

})();

这是一个JSFiddle来演示。现在,您可以通过为变量使用不同的名称来避免潜在的屏蔽问题。请注意我是如何在two()中留下第二个参数的,因为你说你将其用于其他内容。

希望这有帮助!如果您有任何问题,请告诉我。

答案 2 :(得分:0)

删除了函数2中的var语句,因此您将其用作全局变量,而不是创建新的局部变量。哦,并且还在你的函数调用中删除了第二个参数(),因此它看起来像“两(1)”并且还在函数中进行了调整。

(function(){

var f;


    document.getElementById("clickMe").addEventListener("click", function() {
            one("A-test", "B-test", "C-test", two(1));
        }, false);


function three(f) {
    console.log("three:" + f);
    return f;
}

function one(a, b, c, f) {
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(f); // how do I console.log "I need this" here?
}

function two(e) {
    var someVar = e;
    f = "I need this";
    return three(f);
 }

})();