為什么我的全局變量在函數之間不攜帶其值

Question

在鏈接到HTML頁面的JavaScript文檔的頂部，我聲明：

var pizzaVar;

然后，我在代碼的后面有一個函數來設置變量的值，然后調用另一個函數：

function makePizza()
{
    pizzaVar = document.getElementById("pizzaDiv").innerHTML;
    givePizzaToppings();
}

但是，當我嘗試在下一個函數中使用pizzaVar設置pizzaDiv的innerHTML時，什么也沒發生：

function givePizzaToppings()
{
    var toppings = "<p>Onions and Bacon</p>";
    pizzaVar = toppings;
}

但是，如果我將最后一行更改為

document.getElementById("pizzaDiv").innerHTML = toppings;

有效。 我不想每次都想更改pizzaDiv就把它放進去，有沒有辦法解決這個問題。

PS：我試着說

var pizzaVar= document.getElementById("pizzaDiv").innerHTML;  

功能之外，但出現錯誤消息：

TypeError: null is not an object(evaluating 'document.getElementById("pizzaDiv").innerHTML')

Answer 1

您的pizzaVar將指向一個字符串值，該字符串值是分配時的HTML。 它不會神奇地設置一個鏈接來更改它。

如果要使用此全局變量，最好將其指向div元素，然后每次要更改其值時都使用innerHTML 。

然后，您應該進行研究，以了解為什么innerHTML很少是修改DOM的最佳工具。

Answer 2

不幸的是，每當您要更改披薩div的.innerHtml時，都必須在document.getElementById("pizzaDiv").innerHTML的左側編寫document.getElementById("pizzaDiv").innerHTML 。 pizzaVar不是指針，並且不指向div的.innerHtml 。

您得到的錯誤是告訴您document.getElementById("pizzaDiv")返回null ，因此完全沒有屬性，更不用說.innerHtml屬性了。 這是因為在.getElementById調用時它不存在。