单击HTML更改文本的颜色

我目前正在学习HTML。我必须做一个练习，在这个练习中，文本必须从红色变为绿色。 我的代码如下，但似乎不起作用。任何帮助都将不胜感激

.red { color : #FF0000 }
.green {color : #00FF00; }
<script type='text/javascript'>
function f(){
  value=1
  if (value == 1) {
    document.getElementById("txt").className = "green";
    value = 0 
  }
  else if (value == 0) {
    document.getElementById("txt").className="red"  
    value = 1
  }
}
</script>
<p id='i1'>This is <em> special </em> <span id="txt" class='red'>text</span>.</p>
<p id="click"  onclick='f();'>Click to change the colour of text</p>

.red{color:#FF0000}
.green{color:#00FF00；}
函数f（）{
值=1
如果（值==1）{
document.getElementById（“txt”）.className=“绿色”；
值=0
}
else if（值==0）{
document.getElementById（“txt”）.className=“红色”
值=1
}
}
这是一篇特别的文章

单击以更改文本的颜色

这是因为您的

值总是被重新设置为1

我建议使用设置元素的当前状态


函数f（）{
var el=document.getElementById（'txt'）；
如果（el.dataset.val==1）{
el.className=“绿色”；
el.dataset.val=0；
}else if（el.dataset.val==0）{
el.className=“红色”
el.dataset.val=1；
}
}
.red{
颜色：#FF0000
}
格林先生{
颜色：#00FF00；
}
这是一篇特殊的文章
单击以更改文本的颜色
这是因为您的
值
总是被重新设置为1

我建议使用设置元素的当前状态


函数f（）{
var el=document.getElementById（'txt'）；
如果（el.dataset.val==1）{
el.className=“绿色”；
el.dataset.val=0；
}else if（el.dataset.val==0）{
el.className=“红色”
el.dataset.val=1；
}
}
.red{
颜色：#FF0000
}
格林先生{
颜色：#00FF00；
}
这是一篇特殊的文章
单击以更改文本的颜色
不要设置任何值。直接检查
txt
class

function f(){
  var txt = document.getElementById("txt");

  if (txt.className == 'green') {
   txt.className = "red";
  }
  else {
    txt.className = "green";
  }
}

不要设置任何值。直接检查
txt
class

function f(){
  var txt = document.getElementById("txt");

  if (txt.className == 'green') {
   txt.className = "red";
  }
  else {
    txt.className = "green";
  }
}

变化

使用
addEventListener（）
代替属性事件处理程序。现在，演示文稿与代码完全分离
颜色状态取决于方法
classList（）
，因为一切都以类为中心。更多样式可以轻松扩展函数的功能
通过在父元素（
#content
）上添加事件处理，然后选择事件触发器的来源（
e.target
是单击的元素）来使用事件委派，事件委派将为我们节省大量的时间、工作和内存，而不是在每个元素上编写事件处理程序，您只需编写一个


var content=document.getElementById（'content'）；
content.addEventListener（'click'，f）；
函数f（e）{
var tgt=e.target；
if（tgt.classList.contains（'red'））{
tgt.classList.remove（'red'）；
tgt.classList.add（'green'）；
}否则{
tgt.classList.add（'red'）；
tgt.classList.remove（'green'）；
}
}
p{
光标：指针；
}
瑞德先生{
颜色：#FF0000
}
格林先生{
颜色：#00FF00；
}

这是一篇特别的文章

单击以更改文本的颜色
更改

使用
addEventListener（）
代替属性事件处理程序。现在，演示文稿与代码完全分离
颜色状态取决于方法
classList（）
，因为一切都以类为中心。更多样式可以轻松扩展函数的功能
通过在父元素（
#content
）上添加事件处理，然后选择事件触发器的来源（
e.target
是单击的元素）来使用事件委派，事件委派将为我们节省大量的时间、工作和内存，而不是在每个元素上编写事件处理程序，您只需编写一个


var content=document.getElementById（'content'）；
content.addEventListener（'click'，f）；
函数f（e）{
var tgt=e.target；
if（tgt.classList.contains（'red'））{
tgt.classList.remove（'red'）；
tgt.classList.add（'green'）；
}否则{
tgt.classList.add（'red'）；
tgt.classList.remove（'green'）；
}
}
p{
光标：指针；
}
瑞德先生{
颜色：#FF0000
}
格林先生{
颜色：#00FF00；
}

这是一篇特别的文章

单击以更改文本的颜色
您的代码的问题在于您以错误的顺序运行代码，您的基本算法如下：

onclick->
f（）start->
将值设置为1->
检查值是否为1
（true）{将颜色设置为绿色}
（false）{将颜色设置为红色}

然后，如果用户再次单击，相同的算法将再次运行

这就是你应该做的：


var值=真；
函数f（）{
var txt=document.getElementById（“txt”）；
如果（值）{
document.getElementById（“txt”）.className=“绿色”；
值=假；
}否则{
document.getElementById（“txt”）.className=“红色”；
值=真；
}
}
.red{color:#FF0000}
.green{color:#00FF00；}
这是一篇特殊的文章
单击以更改文本的颜色
您的代码的问题在于您以错误的顺序运行代码，您的基本算法如下：

onclick->
f（）start->
将值设置为1->
检查值是否为1
（true）{将颜色设置为绿色}
（false）{将颜色设置为红色}

然后，如果用户再次单击，相同的算法将再次运行

这就是你应该做的：


var值=真；
函数f（）{
var txt=document.getElementById（“txt”）；
如果（值）{
document.getElementById（“txt”）.className=“绿色”；
值=假；
}否则{
document.getElementById（“txt”）.className=“红色”；
值=真；
}
}
.red{color:#FF0000}
.green{color:#00FF00；}