时间戳

首页 > 解决方案 > 在不同的函数中为函数设置变量

javascript - 在不同的函数中为函数设置变量

问题描述

嘿，我是 javascript 的一个相当大的菜鸟，请耐心等待我的错误解释。我尝试用谷歌搜索这个问题，但据我了解，他们的解决方案不适用于我的情况。我正在尝试压缩我的代码，为此我需要在函数 start(); 中设置变量 x 到 1 2 或 3 （取决于我会点击什么按钮）

我无法像大多数人那样在函数 start() 中获取信息，因为我只希望它从 3 个可能函数中的一个中获取一个值，解决方法是在函数 start() 中设置变量从函数 starthigh/mid/low() 设置它。

是否有一个全局变量/返回/其他我不理解或不知道的东西可以解决这个问题？:) （代码非常准系统，所以你们更容易帮助我，因为我知道所有其他代码都无关紧要）

function starthigh() {
  var x = 3;
}

function startmid() {
  var x = 2;
}

function startlow() {
  var x = 1;
}

function start() {
  alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
}
<button onclick="startlow(); start();">1x Bet</button>
<button onclick="startmid(); start();">2x Bet</button>
<button onclick="starthigh(); start();">3x Bet</button>

标签： javascripthtml

解决方案

您的示例中的x变量对于声明它们的函数是本地的。一旦函数返回，变量就不再存在。

要在不以其他方式更改代码的情况下更改它，您必须x改为全局：

var x; // Global

function starthigh() {
    x = 3;
}

function startmid() {
    x = 2;
}

function startlow() {
    x = 1;
}

function start() {
    alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
}

然而，最好避免使用全局变量，也许是通过使用现代事件处理：

<button id="btn1x">1x Bet</button>  
<button id="btn2x">2x Bet</button>    
<button id="btn3x">3x Bet</button>     
<script> 
(function() { // Scoping function, so its contents aren't globals
    var x;

    function starthigh() {
        x = 3;
    }
    function startmid() {
        x = 2;
    }
    function startlow() {
        x = 1;
    }

    function start() { 
        alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
    } 

    // Hook up your handlers
    document.getElementById("btn1x").addEventListener("click", function() {
        starthigh();
        start();
    });
    document.getElementById("btn2x").addEventListener("click", function() {
        startmid();
        start();
    });
    document.getelementById("btn3x").addEventListener("click", function() {
        startlow();
        start();
    });
})();
</script>

不过，我们可以更进一步。starthigh, startmid, 并且startlow都做同样的事情，只是使用不同的值。所以我们可以有一个函数来做这件事，也许有一个函数调用它然后调用start：

<button id="btn1x">1x Bet</button>  
<button id="btn2x">2x Bet</button>    
<button id="btn3x">3x Bet</button>     
<script> 
(function() { // Scoping function, so its contents aren't globals
    var x;

    function startWith(value) {
        x = value;
        start();
    }

    function start() { 
        alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
    } 

    // Hook up your handlers
    document.getElementById("btn1x").addEventListener("click", startWith.bind(null 3));
    document.getElementById("btn2x").addEventListener("click", startWith.bind(null 2));
    document.getelementById("btn3x").addEventListener("click", startWith.bind(null 2));
})();
</script>

或者我们可以存储要在按钮上使用的值：

<button class="start" data-value="3">1x Bet</button>  
<button class="start" data-value="2">2x Bet</button>    
<button class="start" data-value="1">3x Bet</button>     
<script> 
(function() { // Scoping function, so its contents aren't globals
    var x;

    function startWithClick() {
        startWith(+this.getAttribute("data-value"));
    }

    function startWith(value) {
        x = value;
        start();
    }

    function start() { 
        alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
    } 

    // Hook up your handlers
    document.querySelectorAll(".start").forEach(function(btn) {
        btn.addEventListener("click", startWithClick);
    });
})();
</script>

更多探索：

推荐阅读