javascript - 添加类并更改 HTML

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给定状态下的其他类。