时间戳

首页 > 解决方案 > element.innerHTML 在 Javascipt 中没有给出预期的结果

javascript - element.innerHTML 在 Javascipt 中没有给出预期的结果

问题描述

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

所以我在 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');
      }
    });
  });
}

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

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

提前非常感谢。

标签： javascripteventsinnerhtml

解决方案

条件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>

推荐阅读