为什么我的 js onclick 事件在第二次点击时起作用？
我用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>
HUWWW1回答
-
牧羊人nacy
检查.style.someProp元素的 只会为您提供直接分配给该元素的样式属性。由于该元素最初没有color直接分配给它的属性，因此.style.color在函数第一次运行时访问会为您提供空字符串。我不会直接设置样式，而是切换一个类：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>
随时随地看视频慕课网APP
相关分类
JavaScript