Javascript變量未在內部函數中定義

Question

我正在制作一個基於JavaScript的生活游戲，並且我正在嘗試為此建立一個平衡系統。 當我單擊調用我的函數balance（）的按鈕時，控制台將找不到我定義的變量，則會發生錯誤。 請幫助，這是我的代碼：

 var balance; function balance() { let newbalance = balance + 100; let balance = newbalance; document.getElementById("balance").innerHTML = (balance); } 

 <link href="https://fonts.googleapis.com/css?family=Mukta+Malar" rel="stylesheet"> <center> <h1 class="title">Life Game</h1> </center> <table> <tr> <td class="mainTd"> <h1 id="balance">0</h1> </td> <td class="mainTd"> <h1 id="state">Begger</h1> </td> </tr> </table> <button onclick="balance()">Click Me</button> 

Answer 1

您已將函數balance命名為外部變量。

更改函數名稱后，將一些默認值設置為balance， var balance = 0;

Answer 2

有三個問題。

沒有初始化余額變量

如果沒有其他問題，該代碼將仍然無法正常工作。 您無需設置變量就可以創建變量balance ，因此它將是undefined 。 因此，將其加100將NaN

> var balance
undefined
> balance + 100
NaN

重新分配余額變量

首先，定義一個全局未初始化變量balance以存儲余額值。 然后定義功能balance ，該功能balance將分配給同一變量。 因此，變量balance將從現在開始指向一個函數。

> var balance;
undefined
> balance
undefined
> function balance() {}
undefined
> balance
[Function: balance]

遮蔽余額變量

在函數內部，您定義了一個塊范圍為（ let ）的變量balance 。 這將是一個僅存在於函數內部的全新變量，因此您對其執行的任何操作均不會影響函數外部的balance變量。 這被稱為遮蔽，棉短絨應該對此發出警告。

> var balance = 11;
undefined
> function calc() {
... let balance = 22;
... return balance;
... }
undefined
> balance
11
> calc()
22
> balance 
11 <- original balance is still the same

固定碼

 var balance = 0; // set initial value function calculateBalance() { // use unique name for function let newbalance = balance + 100; balance = newbalance; // use the global variable instead of defining a new one document.getElementById("balance").innerHTML = (balance); } 

 <link href="https://fonts.googleapis.com/css?family=Mukta+Malar" rel="stylesheet"> <center> <h1 class="title">Life Game</h1> </center> <table> <tr> <td class="mainTd"> <h1 id="balance">0</h1> </td> <td class="mainTd"> <h1 id="state">Begger</h1> </td> </tr> </table> <button onclick="calculateBalance()">Click Me</button>