Javascript 在我的JS代码中放置.innerHTML的位置有问题

我正在为我的一个模块做一个简单的作业，我已经第三次或第四次遇到这个问题了。我的问题是，正如下面的代码所示，当我将.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;

---

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

顶行不正确，因为您正在用字符串覆盖变量info，而不是将其写入innerHTML

当您将info设置为innerHTML时，它将获得值。您需要将info设置为document.GetElementByIdpOutput，然后设置info.innerHTML：

---

发生这种情况的原因是，在代码的第一位，您捕获了元素的innerHTML属性的值。例如，如果元素中有，则info的值将为。如果在之后修改了元素的innerHTML，info的值仍然是。相反，在代码的第二位中，您捕获的是对元素的引用。因此，您可以修改它的属性，它将反映在元素本身上。发生这种情况的原因已经解释了，但为了简单起见，一些类型（如字符串和数字）被复制为值，而另一些类型（如对象）被复制为引用。

您需要两个变量：一个用于跟踪字符串，另一个用于跟踪元素。旁注，GetElementById需要getElementById@j08691哦，对不起，我在写问题的时候打错了。这是正确的code@Pointy这是良好的做法还是需要做的事情？我将在我的代码中开始这样做，以避免任何问题。谢谢我问过一位导师，他一直在想为什么会发生这种情况，你的导师不应该给JS提供建议，因为这不是异常行为。在JS之外，这也不是异常的。同样值得注意的是，字符串在JS中是不可变的，所以你不能仅仅获得一个对它的引用并对其进行更改。此外，当分配一个新的引用info=document.getElementByIdpOutput后跟info=SomeOtherHtmleElement时，对象引用不会更改旧的引用，而不会影响以前的对象。

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