HTML dice problem (not able to apply css as per requirement)

I am trying to run this code by first time after refresh its going well but after 1 click its not applying CSS as per requirement

This is Problem Statement

THROW DICE Problem Statement: Throw Dice You and your two other team members are doing your construct week project. An issue arises in your project and all three of you come up with a solution. All the three solutions are feasible and each one of you wants to implement his own solution. Hence all of you decided to roll a dice and whoever gets the maximum score will implement his solution. But the problem is you cannot roll a dice online, so you, being an active team member, decided to make an app with three dice showing a random number between 1 to 6 as described below.

Description :- Create an Index.html file Create three “DIV”, which will represent three dice and show a random number between 1 to 6. First will represent score for Member A Second will represent score for Member B And third will represent score for Member C Make a button with text content “ROLL THE DICE” On pressing the button all the three dice should roll and show a random number between 1 to 6. Make a “DIV” at the top which will show the winner Things to follow :- First dice will have id “member-1”. Second dice will have id “member-2”. Third dice will have id “member-3”. Roll the dice button will have id “roll”. The winner showing div will have id “winner” The winning dice will be in color green. The Second scorer dice will be in yellow And the dice who scored least should be in red. In case of draw make the dice scoring equal appear blue.

document.getElementById("roll").addEventListener("click", rollTheDice)

function rollTheDice() {
  var score1 = Math.floor((Math.random() * 6) + 1);
  document.getElementById("score1").innerText = score1;
  var score2 = Math.floor((Math.random() * 6) + 1);
  document.getElementById("score2").innerText = score2;
  var score3 = Math.floor((Math.random() * 6) + 1);
  document.getElementById("score3").innerText = score3;
  if (score1 === score2 && score2 == score3) {
    document.getElementById("winnerteam").innerText = "Draw";
    document.getElementById("member-1").setAttribute("id", "blue");
    document.getElementById("member-2").setAttribute("id", "blue");
    document.getElementById("member-3").setAttribute("id", "blue");
  } else if (score1 === score2 || score1 === score3 || score2 === score3) {
    if (score1 === score2) {
      document.getElementById("winnerteam").innerText = "Draw";
      document.getElementById("member-1").setAttribute("id", "blue");
      document.getElementById("member-2").setAttribute("id", "blue");
      if (score3 > score1) {
        document.getElementById("member-3").setAttribute("id", "green");
      } else {
        document.getElementById("member-3").setAttribute("id", "yellow");
      }
    } else if (score1 === score3) {
      document.getElementById("winnerteam").innerText = "Draw";
      document.getElementById("member-1").setAttribute("id", "blue");
      document.getElementById("member-3").setAttribute("id", "blue");
      if (score2 > score1) {
        document.getElementById("member-2").setAttribute("id", "green");
      } else {
        document.getElementById("member-2").setAttribute("id", "yellow");
      }
    } else if (score2 === score3) {
      document.getElementById("winnerteam").innerText = "Draw";
      document.getElementById("member-2").setAttribute("id", "blue");
      document.getElementById("member-3").setAttribute("id", "blue");
      if (score1 > score2) {
        document.getElementById("member-1").setAttribute("id", "green");
      } else {
        document.getElementById("member-1").setAttribute("id", "yellow");
      }
    }

  } else {
    if (score1 > score2 && score1 > score3) {
      document.getElementById("winnerteam").innerText = 1;
      document.getElementById("member-1").setAttribute("id", "green");
      if (score2 > score3) {
        document.getElementById("member-2").setAttribute("id", "yellow");
        document.getElementById("member-3").setAttribute("id", "red");
      } else {
        document.getElementById("member-2").setAttribute("id", "red");
        document.getElementById("member-3").setAttribute("id", "yellow");
      }
    } else if (score2 > score1 && score2 > score3) {
      document.getElementById("winnerteam").innerText = 2;
      document.getElementById("member-2").setAttribute("id", "green");
      if (score1 > score3) {
        document.getElementById("member-1").setAttribute("id", "yellow");
        document.getElementById("member-3").setAttribute("id", "red");
      } else {
        document.getElementById("member-1").setAttribute("id", "red");
        document.getElementById("member-3").setAttribute("id", "yellow");
      }
    } else {
      document.getElementById("winnerteam").innerText = 3;
      document.getElementById("member-3").setAttribute("id", "green");
      if (score1 > score2) {
        document.getElementById("member-1").setAttribute("id", "yellow");
        document.getElementById("member-2").setAttribute("id", "red");
      } else {
        document.getElementById("member-1").setAttribute("id", "red");
        document.getElementById("member-2").setAttribute("id", "yellow");
      }
    }
  }
  Set.clear();
}

#member-1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
}

#member-2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
}

#member-3 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
}

#roll {
  margin-left: -35px;
  margin-top: 25px;
  text-align: center;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  background-color: gray;
  border: none;
  color: white;
  font-size: 25px;
}

#roll:hover {
  background-color: rgb(53, 52, 52);
  color: black;
  cursor: pointer;
  border: 1px solid black;
}

#parent {
  margin-left: 45%;
}

#winner {
  margin-left: -95px;
}

#green {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  background-color: green;
}

#red {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  background-color: red;
}

#yellow {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  background-color: yellow;
}

#blue {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  background-color: blue
}

<div id="parent">
  <div id="winner">
    <h1>The Winner is team:-<span id="winnerteam"></span></h1>
  </div>
  <div id="member-1">
    <h1 id="score1"></h1>
  </div>
  <div id="member-2">
    <h1 id="score2"></h1>
  </div>

  <div id="member-3">

    <h1 id="score3"></h1>
  </div>
  <button id="roll">ROLL THE DICE</button>
  <!-- <a href="./index.html"></a> -->
</div>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/AjHIclf