Xbinz
Xbinz

Reputation: 11

Add class and change HTML

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 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);

}

Upvotes: 0

Views: 12025

Answers (4)

Zach Saucier
Zach Saucier

Reputation: 25954

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 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

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.

Upvotes: 4

Sachin
Sachin

Reputation: 40970

.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 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

Upvotes: 1

Jake
Jake

Reputation: 1390

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 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';
}

Upvotes: 0

Lucky Soni
Lucky Soni

Reputation: 6878

It seems that you are using jQuery..

var heading = $('#heading'); 


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

}

Upvotes: 0

Related Questions