element.innerHTML 在 Javascript 中没有给出预期的结果答案

【问题标题】：element.innerHTML is not giving expected result in Javasciptelement.innerHTML 在 Javascript 中没有给出预期的结果
【发布时间】：2021-01-17 12:03:59
【问题描述】：

我不确定我对这个问题的标题是否有意义（如果没有，请提出建议）；

所以我在 HTML 中有这个非常简单的例子：

 <button class="btn" type="button"> button1 </button>
 <button class="btn" type="button"> button2 </button>

在 JS 中：

window.onload = () => {
  var buttons = document.querySelectorAll('.btn');

  buttons.forEach((btn) => {
    btn.addEventListener('click', () => {
      if (btn.innerHTML === 'button1') {
        btn.style.background = 'green';
        console.log('Button1 is clicked');
      } else {
        btn.style.background = 'red';
        console.log('Button2 is clicked');
      }
    });
  });
}

我认为它的行为会像预期的那样；但我点击的任何按钮，它的背景都会变成红色。

你能解释一下为什么会这样吗？

非常感谢。

【问题讨论】：

您的意思是使用btn.innerHTML === '1' 吗？内部html不会是'button1'吗？

标签： javascript events innerhtml

【解决方案1】：

条件btn.innerHTML === '1' 总是 false 因为第一个按钮的 innerHTML 的内容是 button1 和第二个按钮的 innerHTML 是 button1。

你可以试试

if (btn.innerHTML.endsWith('1')){...

更新：文本内容周围有一些空格。您应该修剪该值以删除空格。另外，如果内容只是字符串（没有 HTML），我建议您使用 innerText 或 textContent 而不是 innerHTML：

window.onload = () => {
  var buttons = document.querySelectorAll('.btn');

  buttons.forEach((btn) => {
    btn.addEventListener('click', () => {
      if (btn.textContent.trim() === 'button1') {
        btn.style.background = 'green';
        console.log('Button1 is clicked');
      } else {
        btn.style.background = 'red';
        console.log('Button2 is clicked');
      }
    });
  });
}

<button class="btn" type="button"> button1 </button>
<button class="btn" type="button"> button2 </button>

【讨论】：

@shireefkhatab，更新了答案，请查收：）

【解决方案2】：

您在type=""button" 中也使用了太多撇号正确的方式是type="button"。

此外，您可以为两个按钮设置 ID，例如 id="1"，然后检查 btn.id === "1" 还是 "2"。这比检查 html 好得多，以防您想在其中放入实际文本。

【讨论】：