Javascript 添加类并更改HTML

我想添加一个类，并在每次单击按钮时更改段落中的文本。我该怎么做？我对JavaScript非常陌生，因此非常感谢您的帮助

HTML

<h1 id="heading">Hello!</h1>
<button onClick = "good()">Click Me</button>

CSS
.pink{
   color:pink;
}
.blue{
   color:blue;           
}
.red {
    color:red;
}

JS


function good(){
var computerChoice = Math.random();
var heading = document.getElementById('heading'); 


if(computerChoice <= 0.33 ){
    heading.innerHTML =  "This is a good!";
    heading.addClass(pink);


    }
if(computerChoice >= 0.67 ){
    heading.innerHTML =  "This is a bad";
    heading.addClass(blue);   
    }
else {
        heading.innerHTML =  "This is else"; 
}       heading.addClass(red);

}

HTML
你好
点击我
CSS
.粉红{
颜色：粉红色；
}
蓝先生{
颜色：蓝色；
}
瑞德先生{
颜色：红色；
}
JS
功能良好{
var computerChoice=Math.random（）；
var heading=document.getElementById（'heading'）；
如果（计算机选择=0.67）{
heading.innerHTML=“这是一个坏消息”；
标题.addClass（蓝色）；
}
否则{
heading.innerHTML=“这是其他”；
}标题.addClass（红色）；
}

.addClass

方法在jQuery中可用，而不是在纯javascript中。您可以使用

setAttribute

方法设置DOM元素的属性。在这种情况下，可以设置

class

属性

heading.setAttribute("class", "pink");

您还可以使用

.className

属性在javascript中设置类名

heading.className="pink"

除此之外，还有一些错误

在所有应该在else语句中没有意义的语句之后添加red类

第二条语句需要使用

else if

，否则将永远无法获得第一条

if

语句结果

function good() {
 var computerChoice = Math.random(0, 1);
 alert(computerChoice);
 var heading = document.getElementById('heading');
 if (computerChoice <= 0.33) {
     heading.innerHTML = "This is a good!";
     heading.setAttribute("class", "pink");
 } else if (computerChoice >= 0.67) {
     heading.innerHTML = "This is a bad";
     heading.setAttribute("class", "blue");
 } else {
     heading.innerHTML = "This is else";
     heading.setAttribute("class", "red");
 }

功能良好（）{
var computerChoice=Math.random（0,1）；
警报（计算机选择）；
var heading=document.getElementById（'heading'）；
如果（计算机选择=0.67）{
heading.innerHTML=“这是一个坏消息”；
标题.setAttribute（“类”、“蓝色”）；
}否则{
heading.innerHTML=“这是其他”；
标题.setAttribute（“类”、“红色”）；
}

}

---

.addClass

方法在jQuery中可用，而不是在纯javascript中。您可以使用

setAttribute

方法设置DOM元素的属性。在这种情况下，可以设置

class

属性

heading.setAttribute("class", "pink");

您还可以使用

.className

属性在javascript中设置类名

heading.className="pink"

除此之外，还有一些错误

在所有应该在else语句中没有意义的语句之后添加red类

第二条语句需要使用

else if

，否则将永远无法获得第一条

if

语句结果

function good() {
 var computerChoice = Math.random(0, 1);
 alert(computerChoice);
 var heading = document.getElementById('heading');
 if (computerChoice <= 0.33) {
     heading.innerHTML = "This is a good!";
     heading.setAttribute("class", "pink");
 } else if (computerChoice >= 0.67) {
     heading.innerHTML = "This is a bad";
     heading.setAttribute("class", "blue");
 } else {
     heading.innerHTML = "This is else";
     heading.setAttribute("class", "red");
 }

功能良好（）{
var computerChoice=Math.random（0,1）；
警报（计算机选择）；
var heading=document.getElementById（'heading'）；
如果（计算机选择=0.67）{
heading.innerHTML=“这是一个坏消息”；
标题.setAttribute（“类”、“蓝色”）；
}否则{
heading.innerHTML=“这是其他”；
标题.setAttribute（“类”、“红色”）；
}

}

---

您似乎正在使用jQuery

var heading = $('#heading'); 


if(computerChoice <= 0.33 ){
    heading.html("This is a good!");
    heading.addClass(pink);

}

var heading=$（'#heading'）；
如果（computerChoice您似乎正在使用jQuery

var heading = $('#heading'); 


if(computerChoice <= 0.33 ){
    heading.html("This is a good!");
    heading.addClass(pink);

}

var heading=$（'#heading'）；
如果（computerChoice你非常接近！尽管你有一些错误

首先，在纯javascript中（没有jQuery），您需要使用
.classList.add
而不是
.addClass
（请看下面我的注释）

第二个是，在添加类时，需要在类名
蓝色
、
粉色
、和
红色
周围加上括号

第三个是最后一个
.classList.add
在
else
之外，它应该在它里面

第四，第一次使用
if
，第二次使用
else-if
和
else
来捕获其余语句

function good() {
    var computerChoice = Math.random();
    var heading = document.getElementById('heading');

    if (computerChoice <= 0.33) {
        heading.innerHTML = "This is a good!";
        heading.classList.add('pink');
    }    
    else if (computerChoice >= 0.67) {
        heading.innerHTML = "This is a bad";
        heading.classList.add('blue');
    } else {
        heading.innerHTML = "This is else";
        heading.classList.add('red');
    }    
}

功能良好（）{
var computerChoice=Math.random（）；
var heading=document.getElementById（'heading'）；
如果（计算机选择=0.67）{
heading.innerHTML=“这是一个坏消息”；
标题.classList.add（'blue'）；
}否则{
heading.innerHTML=“这是其他”；
标题.classList.add（'red'）；
}    
}


还有一个注意事项：使用
classList.add
方法，如果您多次单击按钮，那么元素可以有多个不同的类，例如
red
和
blue
。文本的颜色将由稍后在CSS中声明的颜色决定，在您的示例中是
blue
wi将默认设置为粉色
和红色

将默认设置为蓝色和粉色

要解决这个问题，您可以使用

.className='red'

，等等。这是您应该使用的方法

---

或者，您可以

。添加所需的类，然后
。删除处于给定状态的其他类。
您非常接近！尽管您有一些错误

首先，在纯javascript中（没有jQuery），您需要使用
.classList.add
而不是
.addClass
（请看下面我的注释）

第二个是，在添加类时，需要在类名
蓝色
、
粉色
、和
红色
周围加上括号

第三个是最后一个
.classList.add
在
else
之外，它应该在它里面

第四，第一次使用
if
，第二次使用
else-if
和
else
来捕获其余语句

function good() {
    var computerChoice = Math.random();
    var heading = document.getElementById('heading');

    if (computerChoice <= 0.33) {
        heading.innerHTML = "This is a good!";
        heading.classList.add('pink');
    }    
    else if (computerChoice >= 0.67) {
        heading.innerHTML = "This is a bad";
        heading.classList.add('blue');
    } else {
        heading.innerHTML = "This is else";
        heading.classList.add('red');
    }    
}

功能良好（）{
var computerChoice=Math.random（）；
var heading=document.getElementById（'heading'）；
如果（计算机选择=0.67）{
heading.innerHTML=“这是一个坏消息”；
标题.classList.add（'blue'）；
}否则{
heading.innerHTML=“这是其他”；
标题.classList.add（'red'）；
}    
}


还有一个注意事项：使用
classList.add
方法，如果您多次单击按钮，那么元素可以有多个不同的类，例如
红色
和
蓝色
。文本的颜色将由稍后在您的ca中CSS中声明的颜色决定