If statement in javascript to perform a CSS action

Question

I've been messing around with java script the past couple of days and have been trying to write an if statement for a match report system I am creating.

        if (document.getElementById('team1_score') > document.getElementById('team2_score') ){
document.getElementById('team1_score').style.color == 'rgb(101, 189, 119)';

}

https://jsfiddle.net/ya6d2qbz/5/

What I am trying to is that if the score of the team1 is greater than team2, the color of team1's text will turn black instead of the normal gray.

However I haven't been successful. Can anyone help me out?

No, I saw that == was used instead of = in another Javascript code. I changed the code but it still does not work — jablonka
– jablonka, Commented Feb 23, 2017 at 2:35
You'd also want to do it in reverse, so that if the second team is winning, then their color would be green. — yaakov
– yaakov, Commented Feb 23, 2017 at 2:41
@Atomixx that == is surely wrong. it's for comparison, not assignment. — Shiping
– Shiping, Commented Feb 23, 2017 at 2:44
@TricksfortheWeb Yes, I presume I would just use the ( else ) statement and assign team2 the color instead? Correct me if i'm wrong — jablonka
– jablonka, Commented Feb 23, 2017 at 2:48

bryangators55 · Accepted Answer · 2017-02-23 14:19:51Z

You have to get the text from the element first before you can compare them. Also you need to use the parseInt function as well.

Here is a simple solution in javascript:

var team1 = document.getElementById('team1_name');
var team2 = document.getElementById('team2_name');
var score1 = document.getElementById('team1_score');
var score2 = document.getElementById('team2_score');
var winningColor = 'rgb(101, 189, 119)';    

if(parseInt(score1.innerHTML) > parseInt(score2.innerHTML)){
    score1.style.color = winningColor;
    team1.style.color = winningColor;
}else if(parseInt(score1.innerHTML) < parseInt(score2.innerHTML)){
    score2.style.color = winningColor;
    team2.style.color = winningColor;
}//does nothing if equal

I also changed your css to make both colors the same by default:

#team1_score, 
#team2_score
{
font-size: 24px;
font-weight: 600;
color: #a5a6a7;
}

#team1_name
{
display: inline-block; 
padding-right: 12px;
font-size: 20px;
font-weight: 700;
color: #a5a6a7;
}

https://jsfiddle.net/bryangators/ya6d2qbz/13/

Bruno Santos · Accepted Answer · 2017-02-23 02:49:28Z

1

The first problem I see is that inside the if block, you are doing a comparison and not an attribution. Instead of == you should use only =.

The second problem is that you should access the textContent of the html element like:

document.getElementById('team1_score').textContent

Since you are comparing what are two numbers in form of string, you should also parse the string to a number. It is also missing the comparison in case of the team 2 is winning, leaving the Javascript like this:

if (Number(document.getElementById('team1_score').textContent) > Number(document.getElementById('team2_score').textContent) ){
    document.getElementById('team1_score').style.color = 'rgb(101, 189, 119)';
    document.getElementById('team1_name').style.color = 'rgb(101, 189, 119)';
}else if (Number(document.getElementById('team2_score').textContent) > Number(document.getElementById('team1_score').textContent)){
    document.getElementById('team2_score').style.color = 'rgb(101, 189, 119)';
    document.getElementById('team2_name').style.color = 'rgb(101, 189, 119)';
}

Here is the fiddle with everything working like a charm: https://jsfiddle.net/7p1v1wt7/

answered Feb 23, 2017 at 2:49

Bruno Santos

1541 silver badge8 bronze badges

2 Comments

jablonka Over a year ago

Thanks! You were thinking one step ahead of me when highlighting the team name and adding a comparison in the event of a draw

Bruno Santos Over a year ago

Glad to help @Atomixx

Ricky Ruiz · Accepted Answer · 2017-02-23 02:50:40Z

You can do the following with your current markup.

Use the function below and a class, named .highlight in this example:

(function() {

  //Cache elements, values and class.
  var highlight = "highlight",
    team1 = document.getElementById('team1_score'),
    //Parse to Int the Inner Text
    team1Score = parseInt(team1.innerText),
    team2 = document.getElementById('team2_score'),
    //Parse to Int the Inner Text
    team2Score = parseInt(team2.innerText);

  //Get highest number
  var highestScore = Math.max(team1Score, team2Score);

  //Highlight the winner.
  if (highestScore === team1Score) {

    team2.classList.remove(highlight);
    team1.classList.add(highlight);

  } else if (highestScore === team2Score) {

    team1.classList.remove(highlight);
    team2.classList.add(highlight);

  }

})();

/* Dont mess with any of this */

.season_date {
  color: #9C9C9C;
  text-align: center;
}

#team1_name {
  display: inline-block;
  padding-right: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #1d1e1f;
}

.team2_name {
  display: inline-block;
}

.team1_logo {
  padding-right: 30px;
  vertical-align: middle;
}

#team2_logo {
  padding-left: 30px;
  vertical-align: middle;
}

#time {
  font-size: 12px;
  color: #48494a;
  font-weight: 600;
  padding-left: 90px;
  padding-right: 90px;
  text-align: center;
}

.scoreboard {
  text-align: center;
}

#team1_score {
  font-size: 24px;
  font-weight: 600;
}

#team2_score {
  font-size: 24px;
  font-weight: 600;
  color: #a5a6a7;
}

#team2_name {
  padding-left: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #a5a6a7;
}

.highlight {
  color: rgb(101, 189, 119);
}

<!-- Header -->

<p class="season_date">Season 1 Day 1</p>

<div class="scoreboard">

  <a id="team1_name">Tiannamen Squares</a>

  <img class="team1_logo" src="http://images.sphaxball.com/teams/50/tiananmen-squares.png" title="Tiannamen Squares">

  <a id="team1_score">2</a>

  <a id="time">FT</a>

  <a id="team2_score">1</a>

  <img id="team2_logo" src="http://images.sphaxball.com/teams/50/colorado-stoners.png">

  <a id="team2_name">Colorado Stoners</a>
</div>

Obsidian Age · Accepted Answer · 2017-02-23 02:51:05Z

1

There are two problems with your code.

First, you use a comparative equals sign (==), which means that you are comparing whether the element is equal to the colour, rather than assigning the element to use that colour. It should be ....style.color = 'rgb(101, 189, 119)';.

Second, you're targeting the DOM element, rather tahn the content of the DOM element. document.getElementById('team1_score') should be document.getElementById('team1_score').innerHTML.

The full JavaScript should be:

if (document.getElementById('team1_score').innerHTML > document.getElementById('team2_score').innerHTML) {
  document.getElementById('team1_score').style.color = 'rgb(101, 189, 119)';
}

Note that you should also be parsing both of the innerHTML contents as integers, to ensure that you can have one value 'greater' than the other :)

parseInt(document.getElementById('team1_score').innerHTML);

I've created a new fiddle showcasing this working correctly here.

Hope this helps! :)

edited Feb 23, 2017 at 2:51

answered Feb 23, 2017 at 2:39

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

4 Comments

yaakov Over a year ago

Comparative, not compartive. :) I'd edit, but the system doesn't consider it "substantial".

jablonka Over a year ago

Thanks so much for the help! I saw the use of ( == ) in another JavaScript code and didn't realize that = and == meant two totally different things.

Obsidian Age Over a year ago

Slight typo; I'll fix that ;) And yes, = and == definitely mean different things! :) There's also ===, which is the same as the comparative equals, but checks type as well. A string containing the text 0 is different to an integer 0 (which is why I said you 'should' parse it as an integer as well ;)

yaakov Over a year ago

@ObsidianAge, since === that is an exact comparative, it can make some interesting things, like false not equaling 0.

Shiping · Accepted Answer · 2017-02-23 11:17:21Z

1

You may try this.

if (document.getElementById('team1_score').innerText > document.getElementById('team2_score').innerText ){

    document.getElementById('team1_score').style.color = 'rgb(101, 189, 119)';
    document.getElementById('team2_score').style.color = 'rgb(0, 0, 0)';
}
else if (document.getElementById('team1_score').innerText < document.getElementById('team2_score').innerText ){
    document.getElementById('team2_score').style.color = 'rgb(101, 189, 119)';
    document.getElementById('team1_score').style.color = 'rgb(0, 0, 0)';
}
else { // some other color for tie
    document.getElementById('team1_score').style.color = 'rgb(0, 0, 0)'; 
    document.getElementById('team2_score').style.color = 'rgb(0, 0, 0)';
}

edited Feb 23, 2017 at 11:17

answered Feb 23, 2017 at 2:42

Shiping

1,3472 gold badges14 silver badges26 bronze badges

Collectives™ on Stack Overflow

If statement in javascript to perform a CSS action

5 Answers 5

Comments

2 Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related