为什么我的全局变量不在函数之间携带它的值

Question

在链接到 HTML 页面的 JavaScript 文档的顶部，我声明：

var pizzaVar;

然后，我稍后在代码中有一个函数设置变量的值，然后调用另一个函数：

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

但是当我尝试在下一个函数中使用pizzaVar来设置pizzaDiv的内部HTML时，没有任何反应：

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。它不会神奇地设置 link 来更改它。

如果你想使用这个全局变量，最好将它指向 div 元素，然后在每次你想更改它的值时使用 innerHTML。

那么您应该研究以了解为什么 innerHTML 很少是修改 DOM 的最佳工具。

Answer 2

不幸的是，每当您想更改比萨 div 的 .innerHtml 时，您都必须在等号的左侧写上 document.getElementById("pizzaDiv").innerHTML。 pizzaVar 不是指针，不指向 div 的 .innerHtml。

您得到的错误是告诉您 document.getElementById("pizzaDiv") 返回了 null，因此根本没有任何属性，更不用说 .innerHtml 属性。这是因为它在 .getElementById 调用时不存在。

why does my global variable not carry its value between functions