How to apply new class for objects in an array?

user_9812848 0
Viewed 68

I am using an array that has some objects in JavaScript, which is then displayed onto an HTML element, and this works. I would like to know how I can change the class if the team WON a match and changes the class if the team LOST a match.

I am using classList.add within an If/Else statement, but this does not seem to work, as it makes the colour of all the objects Red.

Below is my HTML code and JavaScript code.

HTML:

var guide = [{
    result: "won",
    match: "England 2-1 Belgium",
  },
  {
    result: "lost",
    match: "England 0-1 Denmark",
  },
  {
    result: "won",
    match: "England 3-0 Republic of Ireland",
  },
  {
    result: "lost",
    match: "Belgium 2-0 England",
  },
  {
    result: "won",
    match: "England 4-0 Iceland",
  }
]

var text = "";

for (var i = 0; i < guide.length; i++) {
  text += guide[i].match + "<br>";

  if (guide[i].result == "won") {
    document.getElementById("scores").classList.add('colourGreen');
  } else if (guide[i].result == "lost") {
    document.getElementById("scores").classList.add('colourRed');
  }
}

document.getElementById("scores").innerHTML = text;
<div class="form-guide">
  <div class="england-form-guide" id="englandFormGuide">
    <p class="scores" id="scores"></p>
  </div>
</div>

Many thanks.

css arrays html javascript
3 Answers

You are adding classes to your top parent element witch will color all inside.

Instead add span with name of class right before adding the element:

var guide = [{
    result: "won",
    match: "England 2-1 Belgium",
  },
  {
    result: "lost",
    match: "England 0-1 Denmark",
  },
  {
    result: "won",
    match: "England 3-0 Republic of Ireland",
  },
  {
    result: "lost",
    match: "Belgium 2-0 England",
  },
  {
    result: "won",
    match: "England 4-0 Iceland",
  }
]

var text = "";

for (var i = 0; i < guide.length; i++) {
  
  if (guide[i].result == "won") {
    text += '<span  class="colourGreen">' + guide[i].match + '</span><br>';

  } else if (guide[i].result == "lost") {
    text += '<span class="colourRed">' + guide[i].match + '</span><br>';

  }
}

document.getElementById("scores").innerHTML = text;
.colourGreen{
color:green}

.colourRed{
color:red
}
<div class="form-guide">
  <div class="england-form-guide" id="englandFormGuide">
    <p class="scores" id="scores"></p>
  </div>
</div>

user_71589590

The problem is that all of the matches are inside the same p, so you are targeting just one HTML tag. There are many ways to solve this, but my proposed solution is to wrap each match into a span and apply the colour class as the following:

var guide = [{
    result: "won",
    match: "England 2-1 Belgium",
  },
  {
    result: "lost",
    match: "England 0-1 Denmark",
  },
  {
    result: "won",
    match: "England 3-0 Republic of Ireland",
  },
  {
    result: "lost",
    match: "Belgium 2-0 England",
  },
  {
    result: "won",
    match: "England 4-0 Iceland",
  }
]

var text = "";

for (var i = 0; i < guide.length; i++) {
  text += "<br>";

  if (guide[i].result == "won") {
    text += "<span class='colourGreen'>" + guide[i].match + "</span>";
  } else if (guide[i].result == "lost") {
    text += "<span class='colourRed'>" + guide[i].match + "</span>";
  }
}

document.getElementById("scores").innerHTML = text;
<div class="form-guide">
  <div class="england-form-guide" id="englandFormGuide">
    <p class="scores" id="scores"></p>
  </div>
</div>

user_79143060

Your result has only one p element and then just strings and <br> elements and you cannot style text nodes. Instead you could create new p element for each array element and apply class.

var guide = [{"result":"won","match":"England 2-1 Belgium"},{"result":"lost","match":"England 0-1 Denmark"},{"result":"won","match":"England 3-0 Republic of Ireland"},{"result":"lost","match":"Belgium 2-0 England"},{"result":"won","match":"England 4-0 Iceland"}]

const parent = document.getElementById("scores");

guide.forEach(({ result, match }) => {
  const el = document.createElement('div');
  el.textContent = match;
  el.classList.add(result === 'won' ? 'colourGreen' : 'colourRed')
  parent.appendChild(el)
})
.colourGreen {
  color: green;
}

.colourRed {
  color: red;
}
<div class="form-guide">
  <div class="england-form-guide" id="englandFormGuide">
    <p class="scores" id="scores"></p>
  </div>
</div>

user_46207710
Related