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

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 的最佳工具。