无法使用变量 - 我想我只是再次分配变量？答案

【问题标题】：Unable to use variable - I guess I am just assigning the variable again?无法使用变量 - 我想我只是再次分配变量？
【发布时间】：2023-04-07 05:59:01
【问题描述】：

当将 add(a, b) 函数分配给 displayText 变量时，当写为下面最后一行的注释时，它将不起作用。

我认为这是因为我只是为 displayText 变量分配了一个新值。还是？

我该如何解决这个问题？

var displayText = document.getElementById("display-text").innerHTML

function operate(operator, a, b) {
    if (operator === '+') {
        document.getElementById("display-text").innerHTML = add(a, b)
        // displayText = add(a, b)

【问题讨论】：

您获得了对元素的引用，而不是元素的属性：const tmp = document.getElementById('xxx'); tmp.innerHTML = add(a, b)
Duplicate of Setting innerHTML: Why won't it update the DOM?.

标签： javascript

【解决方案1】：

这一行：

var displayText = document.getElementById("display-text").innerHTML

仅获取存储在变量中的innerHTML 的副本，而不是对元素的innerHTML 属性的引用。所以当你稍后设置变量时，你只是覆盖了变量中的字符串，而不是元素的属性。

你需要的行是：

document.getElementById("display-text").innerHTML = add(a, b);

这样你就可以设置属性了。

注意事项：

现在，你真的不应该使用innerHTML，因为你可以避免它因为它具有安全性和性能影响。如果没有字符串中的任何 HTML，您绝对不应该使用它并且相反，您应该使用.textContent。

为了不必一遍又一遍地扫描 DOM 元素，找到它一次并获得对元素。这样，您可以访问持有对的引用的变量尽可能频繁地使用该元素。这就是你正在尝试的与属性有关，但属性存储一个字符串，而该元素是一个对象。

  // Get a reference to the element, not properties of the element
  var displayText = document.getElementById("display-text"); 

  function operate(operator, a, b) {
    if (operator === '+') {
        // Now you can reference the element without searching for it again
        displayText.textContent = add(a, b)

这也是更好的方法，因为现在您可以访问元素变量并获取所需元素的任何属性，而无需再次扫描元素：

displayText.textContent = "foo";
displayText.classList.add("foo)";

【讨论】：

【解决方案2】：

你可能想把你的代码重构成这样的

let displayText = document.getElementById("display-text")

function operate(operator, a, b) {
    if (operator === '+') {
        displayText.innerHTML = add(a,b)

您不需要每次执行函数时都从函数中获取元素

【讨论】：