Reputation: 11
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
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');
}
}
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
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");
}
}
Upvotes: 1
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
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