Finish the dice game by using conditional statements!

Web Development
1

Hi everyone !

I have tried to write a simple program by using JavaScript and how to manipulate the elements but at the end, I got stock when I tried to write the program in a very short way !

*/ ----------- First Way ---------- */

let randomNumber1 = Math.floor(Math.random() * 6) + 1;
let randomDiceImage = “images/dice” + randomNumber1 + “.png”;
document.querySelectorAll(“img”)[0].setAttribute(“src”, randomDiceImage);

let randomNumber2 = Math.floor(Math.random()*6)+1;
let randomDiceImage2 = “images/dice” + randomNumber2 + “.png”;
document.querySelectorAll(“img”)[1].setAttribute(“src”, randomDiceImage2);

randomNumber1 >randomNumber2 ?
(document.querySelector(“h1”).innerHTML = “Player 1 Won”) :
randomNumber2> randomNumber1?
(document.querySelector(“h1”).innerHTML = “Player 2 Won”) :
(document.querySelector(“h1”).innerHTML = “Draw”);

*/ ----------- End of First Way ---------- */

*/ ---------- Second Way ---------- */
But in second way I got stock when I wanted to compare them. and print out who is winner !

// document.querySelectorAll(“img”)[0].setAttribute(“src”,“images/dice” + (Math.floor(Math.random() * 6) + 1) + “.png”);

// document.querySelectorAll(“img”)[1].setAttribute(“src”,“images/dice” + (Math.floor(Math.random() * 6) + 1) + “.png”);

Does anyone have any idea how can I print who is winner by using the second way ??
randomNumber1 >randomNumber2 ?

  • (document.querySelector(“h1”).innerHTML = “Player 1 Won”) :*
    randomNumber2> randomNumber1?
  • (document.querySelector(“h1”).innerHTML = “Player 2 Won”) :*
  • (document.querySelector(“h1”).innerHTML = “Draw”);*


2

@hmorning4525901769 If you want to achieve the functionality of your first way in the second way, it will become really messy and it’s not at all advisable. The reason being, if you try to throw the result without the use of any variables (as is evident by your second way) you will have to parse the image tag attributes as strings, check for the numerical value within those attributes, compare them and then throw the result out. So technically, the second way would actually turn out to be lengthier than the first one.

Moreover, you are using Math function to generate the random numbers. Hence it’s important to store them in variables so that you can access them anywhere in your program. Not storing them and comparing straightaway, would yield unexpected results.

If you still want to try the second way, you can try and follow the steps I have put forward else check this out: https://stackoverflow.com/questions/14939296/extract-image-src-from-a-string

2 Likes
3

For the second method try this document.querySelector(“.img1”).setAttribute(“src”,“./images/dice”+randomNumber()+“.png”);
document.querySelector(“.img2”).setAttribute(“src”,“./images/dice”+randomNumber()+“.png”);

and in the JS File make the operation as

function randomNumber(){
var randomNumber1=Math.floor(Math.random()*6);
console.log(randomNumber1);
return randomNumber1;
}

you will get the Desired output