CODEWITHSUNDEEP
javascriptif-statementswitch-statement
Devinci' Codes
Devinci' Codes

Reputation: 21

How to use if/else comparison to evaluate between switch cases, and determine greater/lesser value

I have a simple problem of trying to evaluate the values of 2 different switch cases for a dice game. The code works correctly until I try to change the innerHTML based on the winner of the game. If player 1 wins, I would like to change the heading to that. I am having trouble understanding how to compare the two switch cases, to correctly display the winner. Is it even possible to compare two switch cases. Most likely a very simple fix, however I am stuck. Any help is appreciated!

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dicee</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">

  </head>
  <body>

    <div class="container">
      <h1>Refresh Me</h1>

      <div class="dice">
        <p>Player 1</p>
        <img class="img1" src="images/dice6.png">
      </div>

      <div class="dice">
        <p>Player 2</p>
        <img class="img2" src="images/dice6.png">
      </div>

    </div>

    <script src="index.js"></script>
  </body>

  <footer>
    www 🎲 App Brewery 🎲 com
  </footer>
</html>

css

.container {
  width: 70%;
  margin: auto;
  text-align: center;
}

.dice {
  text-align: center;
  display: inline-block;

}

body {
  background-color: #393E46;
}

h1 {
  margin: 30px;
  font-family: 'Lobster', cursive;
  text-shadow: 5px 0 #232931;
  font-size: 8rem;
  color: #4ECCA3;
}

p {
  font-size: 2rem;
  color: #4ECCA3;
  font-family: 'Indie Flower', cursive;
}

img {
  width: 80%;
}

footer {
  margin-top: 5%;
  color: #EEEEEE;
  text-align: center;
  font-family: 'Indie Flower', cursive;

}

JS


function randomNumber1(){
    switch(Math.floor(Math.random() * 6) +1){
        case 1:
            return 'images/dice1.png';
        case 2:
            return 'images/dice2.png';
        case 3:
            return 'images/dice3.png';
        case 4:
            return 'images/dice4.png';
        case 5:
            return 'images/dice5.png';
        case 6:
            return 'images/dice6.png';
    }
}

function randomNumber2(){
    switch(Math.floor(Math.random() * 6) +1){
        case 1:
            return 'images/dice1.png';
        case 2:
            return 'images/dice2.png';
        case 3:
            return 'images/dice3.png';
        case 4:
            return 'images/dice4.png';
        case 5:
            return 'images/dice5.png';
        case 6:
            return 'images/dice6.png';
    }
}

if(randomNumber1() > randomNumber2()){
    document.querySelector("h1").innerHTML = "Player 1 Wins";
} else if(randomNumber2() > randomNumber1()){
    document.querySelector("h1").innerHTML = "Player 2 Wins";
} else{
    document.querySelector("h1").innerHTML = "Draw";
}


document.querySelector(".img1").src=randomNumber1();
document.querySelector(".img2").src=randomNumber2();

Upvotes: 0

Views: 36

Answers (1)

Barmar
Barmar

Reputation: 781731

You're choosing different random results when you do the comparisons and when you assign to the image sources.

You should save the results of the functions in variables. Then you will assign the same things you compared.

There's no reason to have two different random number functions, since they're identical. And since the relationship between the random number and the image URL is a simple pattern, there's no need to use switch/case -- just substitute the random number into the string.

function randomNumber(){
    let r = Math.floor(Math.random() * 6) +1;
    return `images/dice${r}.png`;
}

let player1 = randomNumber();
let player2 = randomNumber();

if(player1 > player2){
    document.querySelector("h1").innerHTML = "Player 1 Wins";
} else if(player2 > player2){
    document.querySelector("h1").innerHTML = "Player 2 Wins";
} else{
    document.querySelector("h1").innerHTML = "Draw";
}

document.querySelector(".img1").src=player1;
document.querySelector(".img2").src=player2;

It would be better design to separate choosing and comparing the random numbers from returning the corresponding images. That way you don't have to depend on the image filenames having the same ordering as the dice values.

Upvotes: 1

Related Questions