更改 innerHTML 不会更新页面答案

【问题标题】：Changing innerHTML doesn't update the page更改 innerHTML 不会更新页面
【发布时间】：2019-02-21 00:28:30
【问题描述】：

我试图在单击表格单元格时更改其内容。以下是页面来源：

function cellClick(c) {
  alert(c + " is {" + document.getElementById(c).innerHtml + "}");
  document.getElementById(c).innerHtml = "<b>It Works</b>";
  alert(c + " is now {" + document.getElementById(c).innerHtml + "}");
}

<table border="1">
  <tr>
    <td id="Cell1" onclick='cellClick("Cell1")'>
      Row 1
    </td>
  </tr>
  <tr>
    <td id='Cell2' onclick="cellClick('Cell2')">
      Row 2
    </td>
  </tr>
</table>

是的，我知道 Cell1 和 Cell2 中的调用会切换单引号和双引号；我也在测试它。

不管怎样，第一次点击一个单元格，它的innerHtml值返回“undefined”（而不是“Row 1”或“Row 2”），在函数中设置后，显示设置值；当我再次单击该单元格时，该函数先前设置的值就在那里。但是，页面本身的值永远不会改变。

这个已经试过了：

火狐（64 位）65.0.1

IE 11.2791（不会显示警报）

边缘 38.14393

但它们都做同样的事情——值已设置，但页面没有改变。

我错过了什么？

【问题讨论】：

这是innerHTML 不是innerHtml
你设置了.innerHtml，它事先并不存在——你只需创建这个值。然后你读了它，所以你得到了It works。但是该文档不会更新，因为它在 HTML 中没有任何意义。如果您使用innerHTML，它将起作用。
！ - 这样可行;我对使用“InnerHtml”感到有点惊讶，不仅没有引发某种错误，而且得到了设置和维护
这是 Javascript 的松散方面。如果您使用document.getElementById(c).myRandomName，它也可以工作，并实际创建对象的此属性。

标签： javascript html

【解决方案1】：

您的代码不起作用，因为在 innerHTML 情况下。

其次，将 id 添加到每个 td 并使用 onclick 传递参数会很乏味。所以你可以使用querySelectorAll 然后迭代它并向它添加点击事件监听器。点击后从目标中获取 innerHTML 并提醒它

function cellClick(c) {
  alert(c + " is {" + document.getElementById(c).innerHTML + "}");

  document.getElementById(c).innerHtml = "<b>It Works</b>";

  alert(c + " is now {" + document.getElementById(c).innerHTML + "}");
}

<table border="1">
  <tr>
    <td id="Cell1" onclick='cellClick("Cell1")'>
      Row 1
    </td>
  </tr>
  <tr>
    <td id='Cell2' onclick="cellClick('Cell2')">
      Row 2
    </td>
  </tr>
</table>

document.querySelectorAll('td').forEach((cell) => {
  cell.addEventListener('click', (e) => {
    let text = e.target.innerHTML.trim();
    alert(text)

  })
})

<table border="1">
  <tr>
    <td>
      Row 1
    </td>
  </tr>
  <tr>
    <td>
      Row 2
    </td>
  </tr>
</table>

document.querySelectorAll('td').forEach((cell) => {
  cell.addEventListener('click', function(e) {
    let text = this.innerHTML.trim();
    alert(text)

  })
})

<table border="1">
  <tr>
    <td>
      Row 1
    </td>
  </tr>
  <tr>
    <td>
      Row 2
    </td>
  </tr>
</table>

【讨论】：

不使用e.target，如果回调不是箭头函数，是否可以使用this.innerHTML？

【解决方案2】：

您可以在此处享受事件委托的好处。

它将在内存中创建更少的事件处理程序。
它具有可扩展性，并具有更好的性能。

这是它的代码 sn-p。

function cellClick(e) {
  if (e.target.tagName === "TD") { //e.target.tagname.toLowerCase() === "td")
    console.log(e.target.innerHTML);
    e.target.innerHTML = "<b>It Works</b>"
  }
}

<table border="1" onclick='cellClick(event)'>
  <tr>
    <td id="Cell1">
      Row 1
    </td>
  </tr>
  <tr>
    <td id='Cell2'>
      Row 2
    </td>
  </tr>
</table>

谢谢！

【讨论】：

【解决方案3】：

你的innerHtml innerHTML写得不好

【讨论】：

您可以在编写答案时付出更多努力。你基本上只是重写了我的评论。我理解需要一个正确的答案，以便其他人稍后可以轻松阅读，但您至少应该解释为什么没有错误。