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

Question

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

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。 pizzaVar不是指针，也不指向div的.innerHtml。

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