为什么我的 js onclick 事件在第二次点击时起作用？

Question

我用 js 做了一个 onclick，它在红色和绿色之间切换文本区域文本的颜色。（开始为红色）知道为什么 onclick 在第二次单击后开始起作用但不是立即起作用吗？

function todocheckdone(){
  var el = document.getElementById("task1");   
    
if (el.style.color === "red"){
    el.style.color = "green";
    }
  
  else{
    el.style.color = "red";
}}

#todosnumbering{
   font-size: 18px;
    top: 18px;
    left: 10px;
    position: absolute;
}
#task1{
    font-size: 18px;
    text-align: left;
    color: red;
    font-size: 18px;
    width: 358px;
    height: 40px;
    top: 16px;
    left: 30px;
    position: absolute;
    background: white;
   
    }
#todocheck1{
    
    top: 20px;
    left: 406px;
    position: absolute;
}

<html>
<body>
<button type="button" id="todocheck1" onclick="todocheckdone()"
>✓</button>
<div id="todosnumbering">1.</div>
<textarea id="task1">THIS TEXT TOGGLES BETWEEN GREEN AND RED</textarea>
</body>
</html>

Answer 1

检查元素的 .style.someProp 只会为您提供 直接分配给元素 的样式属性。由于该元素最初没有直接分配给它的 color 属性，因此访问 .style.color 会在函数第一次运行时为您提供空字符串。

我不会直接设置样式，而是切换 class:

function todocheckdone() {
  var el = document.getElementById("task1");
  el.classList.toggle('green');
}

#todosnumbering {
  font-size: 18px;
  top: 18px;
  left: 10px;
  position: absolute;
}

#task1 {
  font-size: 18px;
  text-align: left;
  color: red;
  font-size: 18px;
  width: 358px;
  height: 40px;
  top: 16px;
  left: 30px;
  position: absolute;
  background: white;
}

#task1.green {
  color: green;
}

#todocheck1 {
  top: 20px;
  left: 406px;
  position: absolute;
}

<button type="button" id="todocheck1" onclick="todocheckdone()">✓</button>
<div id="todosnumbering">1.</div>
<textarea id="task1">THIS TEXT TOGGLES BETWEEN GREEN AND RED</textarea>

为什么我的 js onclick 事件在第二次点击时起作用？

Why my js onclick event works on the second click forward?

javascript

onclick