EventListener 只触发一次

Question

仍在学习 JS 的基础知识，现在使用 EventListeners。 尝试制作一个来回更改文本颜色的按钮，但我认为我误解了该方法的性质，或者使用不正确。 我不相信这是语法问题。

我有文本和按钮，都带有 ID。 我为这两个元素创建了变量。 我为按钮添加了一个事件监听器，并在 function 中定义了 if else 语句。 function 的“if”部分执行没有问题，但这就是它结束的地方。 提前对格式表示抱歉，我不确定什么是最有意义的。 谢谢！

这是 HTML：

<h1 id="header"> Here's some text </h1>

<button id="button"> Change the Color </button>

CSS：

#header {
    color: red;
  }

和 JavaScript：

var header = document.getElementById("header");

var button = document.getElementById("button");

button.addEventListener("click", function() {

  if (header.style.color = "red")   

{header.style.color = "blue";} 

else if (head.style.color = "blue")
{header.style.color = "red";
  }
})

Answer 1

在 JavaScript （和其他语言）中，您需要使用==来检查是否相等。

但是，在 JavaScript 中也有=== 。 ===是严格的相等运算符，这意味着它不进行类型转换。 这意味着什么？ 它的意思是：

"5" == 5 // true, since "5" as a number is equal to 5, the literal number

"5" === 5 // false, since a string cannot equal a number

因此，在您的 if 语句中，您应该使用==或===而不仅仅是= 。

Answer 2

其他人提到使用= vs == vs === - 这绝对是你的问题，但你也会有其他问题来比较 styles 的方式。

style属性独特且繁琐。 您有“样式”属性，它是 DOM 节点的属性（就像用于锚点的href或用于输入的type ）。 然后你有 styles 从样式表应用 - <style>标记或外部样式表文件。 有时两个不同的 styles 源会发生冲突。

对于样式属性，您可以像现在一样阅读node.style.color属性。 要获得应用于节点的实际颜色，您必须使用window.getComputedStyle() 。 让我通过示例来解释差异：

 const div = document.getElementById('foo') div.style.color; //-> red window.getComputedStyle(div).color; //-> rbg(0, 255, 0)

 #foo { color: green !important }

 <div id="foo" style="color: red">Hello!</div>

请注意我们如何在节点本身上设置red ，但在样式表中设置green !important 。 !important将获胜，这就是文本为绿色的原因。 此外，浏览器将颜色名称green转换为其 RGB 等效rgb(0, 255, 0) 。 协调起来可能很乏味。 我通常建议使用多个 class 名称并在单击时在这些名称之间切换：

 var header = document.getElementById("header"); var button = document.getElementById("button"); button.addEventListener("click", function() { if (header.classList.contains("red")) { header.classList.remove("red") header.classList.add("blue") } else if (header.classList.contains("blue")) { header.classList.remove("blue") header.classList.add("red") } })

 .red { color: red }.blue { color: blue }

 <h1 id="header" class="red"> Here's some text </h1> <button id="button"> Change the Color </button>