Question

2015-08-24

58

javascript global-variables innerhtml

在链接到 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 。 pizzaVar 不是指针，并不指向 div 的 .innerHtml 。

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