javascript - Add class and change HTML - Stack Overflow

admin管理员组

文章数量:1396778

I want to add a class and change text in my paragraph every time a button is clicked. How can I do this? I am very new to JavaScript, so any help will be greatly appreciated!

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 puterChoice = Math.random();
var heading = document.getElementById('heading'); 


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


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

}

I want to add a class and change text in my paragraph every time a button is clicked. How can I do this? I am very new to JavaScript, so any help will be greatly appreciated!

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 puterChoice = Math.random();
var heading = document.getElementById('heading'); 


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


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

}

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 16, 2014 at 21:09 Vlad Schnakovszki 8,60266 gold badges8383 silver badges114114 bronze badges asked Feb 16, 2014 at 20:46 XbinzXbinz 1111 gold badge11 silver badge33 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You were very close! Though you have a few errors.

The first is that in pure javascript (without jQuery) you need to use .classList.add instead of .addClass (look at my note down below)

The second is that you need to include parenthesis around the class names blue, pink, and red when you're adding the class

The third is that the last .classList.add was outside of the else, it should be inside of it

The fourth is that you need to use if the first time, else if the second statement, and else to catch the rest

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

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

Demo

One note as well: Using the classList.add method, if you click the button multiple times then the element can have multiple of the various classes, meaning both red and blue for example. The color of the text will then be determined by the one declared in the CSS later on, in your case blue will default over pink and red will default over blue and pink

To fix this you could use .className = 'red', etc. instead. This is the approach you should be using! Demo

Alternatively, you could .add the class(es) you want and .remove the other(s) in a given state.

.addClass method is available in jQuery not in pure javascript. You can use setAttribute method the set the attribute of the DOM Element. In this case you can set the class attribute

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

You can also use the .className property to set the class name in javascript.

heading.className="pink"

apart from this there are some errors too

You are adding red class after all the statement which make no sense that should be inside the else statement.

You need to use else if for second statement otherwise you will never get the first if statement result.

function good() {
 var puterChoice = Math.random(0, 1);
 alert(puterChoice);
 var heading = document.getElementById('heading');
 if (puterChoice <= 0.33) {
     heading.innerHTML = "This is a good!";
     heading.setAttribute("class", "pink");
 } else if (puterChoice >= 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

It seems that you are using jQuery..

var heading = $('#heading'); 


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

}

a pure javascript solution that supports older browsers would be using element.className with the "+=" operator to add additional class to the element.

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

本文标签： javascriptAdd class and change HTMLStack Overflow