Question

我想在每次单击按钮时添加一个类并更改段落中的文本。我怎样才能做到这一点？我是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);

}

Answer 1

你非常接近！虽然你有一些错误。

第一个是在纯javascript（没有jQuery）中你需要使用.classList.add而不是.addClass（查看下面的注释）

第二，当您添加班级时，您需要在班级名称blue，pink和red周围加上括号

第三个是最后一个.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');
    }    
}

Demo

还有一个注意事项：使用classList.add方法，如果多次单击该按钮，则该元素可以包含多个不同的类，例如red和blue 。然后，文本的颜色将由稍后在CSS中声明的文本确定，在您的情况下blue将默认超过pink，red将默认超过blue并且pink

要解决此问题，您可以使用.className = 'red'等代替。这是你应该使用的方法！ Demo

或者，你可以.add你想要的类和.remove给定状态的其他人。

Answer 2

.addClass方法在jQuery中不可用于纯JavaScript。您可以使用setAttribute方法设置DOM元素的属性。在这种情况下，您可以设置class属性

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

您还可以使用.className属性在javascript中设置类名。

heading.className="pink"

除此之外还有一些错误

在所有声明之后添加红色类，这些声明应该在else语句中。

您需要使用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");
 }

}

<强> Js Fiddle Demo

Answer 3

好像你正在使用jQuery ..

var heading = $('#heading'); 


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

}

Answer 4

支持旧浏览器的纯JavaScript解决方案是使用带有“+ =”运算符的element.className来向元素添加其他类。

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

添加类并更改HTML

4 个答案: