javascript - 单击两次以获取两个 onClick 事件

Question

是否可以有一个 onClick 事件，在第一次点击时它使用一个功能，而第二次点击它使用另一个？

例如

<p id="demo" onclick="goRed(), goBlue()">Click me to change my text color.</p>

<script>
    function goRed() {
        document.getElementById("demo").style.color = "red";
    }
    function goBlue() {
        document.getElementById("demo").style.color = "blue";
    }
</script>

我能否让 onClick 函数首先使用 goRed()，然后在第二次点击后使用 goBlue()？谢谢

Answer 1

只使用一个函数，但在该函数的不同颜色之间切换:

function toggleColor() {
  var el = document.getElementById("demo");
  
  if (!el.style.color || el.style.color == "blue")
    el.style.color = "red";
  
  else
    el.style.color = "blue";
}

<p id="demo" onclick="toggleColor()">Click me to change my text color.</p>

如果元素的 color 当前是“blue”或尚未设置，我们在这里将 color 设置为“red”。否则我们将其设置为“蓝色”。