본문 바로가기
Web Dev

Dicee

by YGSEO 2021. 1. 5.
728x90
var randomNumber1 = Math.floor(Math.random() * 6) + 1;

var randomImageSource = "images/dice" + randomNumber1 + ".png";

var image1 = document.querySelectorAll("img")[0]
var image2 = document.querySelectorAll("img")[1]

image1.setAttribute("src", randomImageSource)


// Image 1
var randomNumber1 = Math.floor(Math.random() * 6) + 1;
var randomImageSource = "images/dice" + randomNumber1 + ".png";
var image1 = document.querySelectorAll("img")[0];
// var image2 = document.querySelectorAll("img")[1];
image1.setAttribute("src", randomImageSource)

// Image 2
var randomNumber2 = Math.floor(Math.random()*6)+1;
var randomImageSource2 = "images/dice" + randomNumber2 + ".png";
document.querySelectorAll("img")[1].setAttribute("src", randomImageSource2)
// image2.setAttribute("src", randomImageSource2);

// If player 1 wins
if (randomNumber1 > randomNumber2) {
    document.querySelector("h1").innerHTML = "🚩 Player 1 Wins!";
} else if (randomNumber1 < randomNumber2) {
    document.querySelector("h1").innerHTML = "Player 2 Wins! 🚩";
} else {
    document.querySelector("h1").innerHTML = "Draw!";
}

By looking at the code above, for two images, different approachs are applied to each other regrading Element.setAttribute();

 

For image1, make a variable for the attribute to change, then change its attribute to newly created one, i.e. "randomImageSource".

 

For image2, not creating a varible, just directly change the attribute to change.

728x90

댓글