在我的JS代码中将.innerHTML放在哪里的问题

Question

我正在为我的一个模块做一个简单的分配，并且已经第3次或第4次遇到此问题。我的问题是，如我的代码如下所示，当我将.innerHTML属性放在第一行时，它根本不起作用，并且控制台窗口中没有错误。当我将其放在第二行的info.innerHTML之后时，它确实起作用。我已经问过一位导师，他被困在为什么会这样

var info = document.getElementById("pOutput").innerHTML;
info = "Sum: " + sum + "<br>Average: " + avg;

var info = document.getElementById("pOutput");
info.innerHTML = "Sum: " + sum + "<br>Average: " + avg;

Answer 1

您包含的第二个变体是正确的，但需要getElementById（）而不是GetElementById（）。

最上面的几行是不正确的，因为您正在使用字符串覆盖变量信息，而不是将其写入innerHTML。

Answer 2

将info设置为innerHTML时，它就是获取值。您需要将info设置为document.GetElementById("pOutput")，然后设置info.innerHTML：

var info = document.getElementById("pOutput");
info.innerHTML = "Sum: " + sum + "<br>Average: " + avg;

Answer 3

之所以发生这种情况，是因为在第一行代码中，您捕获了元素的innerHTML属性的值。例如，如果您的元素中包含<div></div>，则info的值为“ <div></div>”。如果您之后修改了元素的innerHTML，则info的值仍为<div></div>。相反，在第二部分代码中，您捕获的是对该元素的引用。因此，您可以修改其属性，它将反映在元素本身上。 here解释了这种情况发生的原因，但为简单起见，将某些类型（如字符串和数字）复制为值，而将其他类型（如Objects）复制为引用。