Javascript 由于作用域问题,无法重新使用变量。我怎样才能解决这个问题?

Javascript 由于作用域问题,无法重新使用变量。我怎样才能解决这个问题?,javascript,html,Javascript,Html,我希望能够在新函数中使用“validBet”。ValidSet基本上是数组“betButtonsArr”的最后一个值。因此,最后单击的按钮将是下注,而不是之前的任何按钮。现在我需要能够使用validBet来确定下注,在新函数中计算输赢 问题是我得到一个validBet是未定义的错误 我只使用VanillaJS,因为我想在进入库之前先学习JS // starter cash will be 100. var cashTotal = 100; //Cash currently hol

我希望能够在新函数中使用“validBet”。ValidSet基本上是数组“betButtonsArr”的最后一个值。因此,最后单击的按钮将是下注,而不是之前的任何按钮。现在我需要能够使用validBet来确定下注,在新函数中计算输赢

问题是我得到一个validBet是未定义的错误

我只使用VanillaJS,因为我想在进入库之前先学习JS

    // starter cash will be 100.
    var cashTotal = 100; //Cash currently holding.
    var showTotal = document.querySelector("#amount").innerHTML = cashTotal;
    var bet = [5, 10, 50, 100]; //Bets you can do.

    var numGenerated;
    function updateDisplay() {
      document.querySelector('#generated_number').innerHTML = "".split.call(numGenerated, "").join("");
    }

    function highLow(){
        var storeNum = Math.floor(Math.random() * 11) + 0;
        numGenerated = storeNum;
    }


    function choiceLow(){
        highLow();
        updateDisplay();
        console.log(numGenerated);
        if (numGenerated < 5){
            // run function to add winnings
        }
        else {
            // run function to subtract bet amount.
            return;
        }
    }

    function choiceHigh(){
        highLow();
        updateDisplay();
        console.log(numGenerated);
        if (numGenerated == 5 || numGenerated > 5){
            // run function to add winnings.
        }
        else {
            // run function to subtract bet amount.
            return;
        }

    }

    var betAmount = [];
    function placeBet(){
        var betBtn_nodelist = document.querySelectorAll('.bet_amount > button');
        var betButtonsArr = Array.prototype.slice.call(betBtn_nodelist);
        //
        for (var i = 0; i < betButtonsArr.length; i++) {
            betButtonsArr[i].onclick = function(){ // when clicked, push value of clicked button to betAmount array for grabbing the placed bet.
                betAmount.push(this.value);
                console.log(betAmount);

                var validBet = betAmount[betAmount.length - 1]; // when multiple bet amounts are clicked, take the last amount chosen, make that the final and valid bet amount.
                console.log(validBet) //This is the real bet amount, as explained one line above.
                console.log(cashTotal)
            }
        }
    }
    placeBet();

    function addWinningsAmount(){

    }


    function subtractBetAmount(){

    }



    var lower = document.querySelector("#lower");
    var higher = document.querySelector("#higher");

    lower.addEventListener('click', choiceLow);
    higher.addEventListener('click', choiceHigh);

在javascript中声明全局对象时,需要在顶部声明它。函数中声明的任何变量仅限于该函数

或者,如果变量仍然需要在函数内部声明,但具有全局范围,请使用窗口声明。例如,window.validBet=betAmount[betAmount.length-1]。确保在函数访问变量之前调用了声明变量的函数


声明全局变量时不要使用“var”。

var validBet
使变量成为指定为单击此处事件处理程序的匿名函数的本地变量。何时需要调用
addWinningsAmount
?如果在单击按钮时发生这种情况,那么您只需从事件处理程序中调用它,并将您可以访问的变量作为参数传递给此函数……我需要将其添加到两个函数中:choiceHigh和choiceLow,subtractbetAmount也是如此。它将被添加到if/else语句中。-我还尝试在函数本身之前声明validBet变量,但它仍然没有定义。不确定什么是正确的方法。对JS来说还是一种新的东西。它是一个范围相关的东西。如果您想立即看到结果,可以尝试在顶部的“bet”下启动“validBet”。如果我在顶部的placeBet函数下声明它,我仍然无法在addWinningsAmount()中访问它。我猜应该使用“let”声明全局变量吗?除非它是常量?否。让我们创建块范围变量。var创建函数/全局范围变量。窗口创建全局范围变量。很好地解释了这个概念。
     <!DOCTYPE html>
    <html lang="en" dir="ltr">
        <head>
            <meta charset="utf-8">
            <title>Betting Project</title>
            <link rel="stylesheet" href="betting.css">
        </head>
        <body>
            <div class="cash_total"><p>Your balance is: <span id="amount"></span>.</p></div>
            <h1 style="text-align: center;">BET NOW</h1>
            <div class="bet_amount">
                <button class="five" value="5">5</button>
                <button class="ten" value="10">10</button>
                <button class="fifty" value="50">50</button>
                <button class="hundred" value="100">100</button>
            </div>
            <div id="generated_number"></div>
            <div class="buttonHolder" style="text-align: center;">
                <button id="lower">LOWER</button>
                <button id="higher">HIGHER</button>
            </div>
            <script src="betting.js"></script>
        </body>
    </html>
function addWinningsAmount(){
    console.log(validBet)
}