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

Question

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

所以我有这个非常简单的示例.. 在 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');
      }
    });
  });
}

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

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

非常感谢。

Answer 1

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

你可以试试

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

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

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>

Answer 2

您在 type=""button" 中也使用了过多的撇号正确的方法是type="button".

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

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

element.innerHTML is not giving expected result in Javascipt

javascript

events

innerhtml