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

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

不幸的是，每当您想要更改pizzadiv的.innerHtml时，您将不得不在等号的左侧写入document.getElementById("pizzaDiv").innerHTML。pizzaVar不是指针，也不指向div的.innerHtml。

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