Lessons 148 and 149 – Complete 2020 Web Development Bootcamp

Lesson 148 – Dicee Challenge Step 4: Change the <img> to a Random Dice

The challenge in this lesson is to use a random number to pick out a random dice image between dice1.png to diceĀ 6.png then place this image inside the left <img> element.

This is my solution –

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

function randomNumGen1() {
  var randomNumber1 = Math.floor(Math.random() * 6) + 1;
  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");
  }
}

Lesson 149 – Dicee Challenge Step 5: Change Both <img> Elements

The challenge for this lesson is to do the same thing right <img> element so that both dice images change.

This is my solution –

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

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

function randomNumGen1() {
  var randomNumber1 = Math.floor(Math.random() * 6) + 1;
  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");
  }
}

function randomNumGen2() {
  var randomNumber1 = Math.floor(Math.random() * 6) + 1;
  if (randomNumber1 == 1) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice1.png");
  }
  
  else if (randomNumber1 == 2) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice2.png");
  }
  
  else if (randomNumber1 == 3) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice3.png");
  }
  
  else if (randomNumber1 == 4) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice4.png");
  }
  
  else if (randomNumber1 == 5) {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice5.png");
  }
  
  else {
      document.getElementsByClassName("img2")[0].setAttribute("src", "images/dice6.png");
  }
}