Lesson 150 – Complete 2020 Web Development Bootcamp

Lesson 150 – Dicee Challenge Step 6: Change the title to display a winner

The challenge in this lesson was to change the text of the <h1> element to show which player won or whether there was a draw depending on the dice values of each player. This is my solution.

I am sure there is a more concise way to write the code. Also, there is a problem with my code in that if you click “Player 2” first it still tells you which player won or whether there was a draw. I haven’t been able to figure out how to require that “Player 1” must be clicked first and then “Player 2” clicked before the code changes the <h1> element to display whether there was a winner or whether there was a draw.

document.getElementById("player1").addEventListener("click", randomNumGen1);

document.getElementById("player2").addEventListener("click", randomNumGen2);

var randomNumber1 = Math.floor(Math.random() * 6) + 1;
var randomNumber2 = Math.floor(Math.random() * 6) + 1;
var randomNumber3 = Math.floor(Math.random() * 6) + 1;
var randomNumber4 = Math.floor(Math.random() * 6) + 1;

var player1Score = randomNumber1 + randomNumber2;
console.log(player1Score);

var player2Score = randomNumber3 + randomNumber4;
console.log(player2Score);

function randomNumGen1() {
  
  if (randomNumber1 == 1) {
      document.getElementsByClassName("img1")[0].setAttribute("src", "images/dice1.png");
  }
  
  else if (randomNumber1 == 2) {
      document.getElementsByClassName("img1")[0].setAttribute("src", "images/dice2.png");
  }
  
  else if (randomNumber1 == 3) {
      document.getElementsByClassName("img1")[0].setAttribute("src", "images/dice3.png");
  }
  
  else if (randomNumber1 == 4) {
      document.getElementsByClassName("img1")[0].setAttribute("src", "images/dice4.png");
  }
  
  else if (randomNumber1 == 5) {
      document.getElementsByClassName("img1")[0].setAttribute("src", "images/dice5.png");
  }
  
  else {
      document.getElementsByClassName("img1")[0].setAttribute("src", "images/dice6.png");
  }


  if (randomNumber2 == 1) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice1.png");
  }
  
  else if (randomNumber2 == 2) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice2.png");
  }
  
  else if (randomNumber2 == 3) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice3.png");
  }
  
  else if (randomNumber2 == 4) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice4.png");
  }
  
  else if (randomNumber2 == 5) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice5.png");
  }
  
  else {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice6.png");
  }


}


function randomNumGen2() {
  
  if (randomNumber3 == 1) {
      document.getElementsByClassName("img1")[0].setAttribute("src", "images/dice1.png");
  }
  
  else if (randomNumber3 == 2) {
      document.getElementsByClassName("img1")[0].setAttribute("src", "images/dice2.png");
  }
  
  else if (randomNumber3 == 3) {
      document.getElementsByClassName("img1")[0].setAttribute("src", "images/dice3.png");
  }
  
  else if (randomNumber3 == 4) {
      document.getElementsByClassName("img1")[0].setAttribute("src", "images/dice4.png");
  }
  
  else if (randomNumber3 == 5) {
      document.getElementsByClassName("img1")[0].setAttribute("src", "images/dice5.png");
  }
  
  else {
      document.getElementsByClassName("img1")[0].setAttribute("src", "images/dice6.png");
  }


  if (randomNumber4 == 1) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice1.png");
  }
  
  else if (randomNumber4 == 2) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice2.png");
  }
  
  else if (randomNumber4 == 3) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice3.png");
  }
  
  else if (randomNumber4 == 4) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice4.png");
  }
  
  else if (randomNumber4 == 5) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice5.png");
  }
  
  else {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice6.png");
  }

winningPlayer();
  
}

function winningPlayer() {

if (player1Score > player2Score) {
	document.getElementsByTagName("h1")[0].innerHTML = "Player 1 Wins!";
}

else if (player2Score > player1Score) {
	document.getElementsByTagName("h1")[0].innerHTML = "Player 2 Wins!";
}

else {
	document.getElementsByTagName("h1")[0].innerHTML = "Draw";
}

}

The next lesson is the solution so I’ll see how the program for the Dicee game should have been written. 😀