Recently, in my coding class, we were tasked with creating a program that would display images of dice and generate random numbers when the refresh button was clicked. To practice using querySelector and setAttribute, I decided to expand on the lesson by incorporating a rock-paper-scissors game into the program. Unfortunately, I have been facing difficulties getting my code to execute the functions responsible for displaying the corresponding images of paper, rock, or scissors based on randomNumber1 or randomNumber2. Despite trying to implement the code with both Bootstrap4 and plain JavaScript, I haven't been able to resolve the issue. Oddly enough, in a previous exercise where we implemented similar functionality for rolling dice using just JavaScript, CSS, and HTML5 without bootstrap, everything worked smoothly.
Initially, I attempted to write the code using Bootstrap4, and it seemed to function correctly until I introduced the logic for randomizing the dice rolls upon clicking refresh. When this didn't work, I switched to regular javascript but faced the same issue--the code wouldn't run as intended. After spending hours trying to troubleshoot, I've hit a dead end. Below are snippets of the code I wrote using Bootstrap4 initially, and then the revised version using only JavaScript.
First Attempt with Bootstrap 4
<!-- css stylesheet -->
<link rel="stylesheet" href="stylesPractice2.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Kalam:400,700" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="header">Rock, Paper, Scissors</h1>
<div class = "decision">
<h2 class = "subtopic">Need to make a decision???</h2>
</div>
<div class = "players">
<h2 class = "subtopic">Player 1</h2>
<img class = "responsive img1" src = "images/rockPaperScissors3.png">
</div>
<div class="players">
<h2 class = "subtopic">Player 2</h2>
<img class = "responsive img2" src = "images/rockPaperScissors3.png">
</div>
<div class = "whoWins">
<h2 class = "subtopic">And the winner is . . .</h2>
</div>
</div>
<script src = "rockPaperScissors.js" charset = "utf-8"></script>
</body>
JavaScript Code Snippet
// FIRST PLAYER CREATE RANDOM NUMBER
var randomNumber1 = (Math.floor(Math.random() * 3)) + 1;
// SECOND PLAYER CREATE RANDOM NUMBER
var randomNumber2 = Math.floor(Math.random() * 3) + 1;
function images1() {
if(randomNumber1 === 1) {
document.querySelector(".img1").setAttribute("src", "images/rockPaperScissors1.png");
}
else if(randomNumber1 === 2) {
document.querySelector(".img1").setAttribute("src", "images/rockPaperScissors2.png");
}
else if(randomNumber1 === 3) {
document.querySelector(".img1").setAttribute("src", "images/rockPaperScissors3.png");
}
}
Despite putting in effort, I wasn't able to progress beyond this point due to image randomization issues.
Second Attempt Without Using Bootstrap
<link rel="stylesheet" href="stylesPractice2.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Kalam:400,700" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="header">Rock, Paper, Scissors</h1>
<div class = "decision">
<h2 class = "subtopic">Need to make a decision???</h2>
</div>
<div class = "players">
<h2 class = "subtopic">Player 1</h2>
<img class = "responsive img1" src = "images/rockPaperScissors3.png">
</div>
<div class="players">
<h2 class = "subtopic">Player 2</h2>
<img class = "responsive img2" src = "images/rockPaperScissors3.png">
</div>
<div class = "whoWins">
<h2 class = "subtopic">And the winner is . . .</h2>
</div>
</div>
<script src = "rockPaperScissors.js" charset = "utf-8"></script>
</body>
Both versions reach the </html> tag at the end.
CSS Styling Section
body {
font-family: 'Kalam', cursive;
background-color: #76fc23;
color: #2357fc;
}
.container {
width: 80%;
margin: auto;
text-align: center;
}
.title {
margin-top: 4.0rem;
}
.header {
font-weight: 700;
font-size: 5rem;
line-height: 1.5;
}
h2 {
font-size: 3rem;
}
.players {
display: inline-block;
margin: 0 2rem 3rem 2rem;
}
.player1 {
text-align: center;
margin-bottom: 3rem;
}
.player2 {
text-align: center;
margin-bottom: 3rem;
}
.img {
width: 100%;
height: auto;
}
Final Touches in JavaScript
// FIRST PLAYER CREATE RANDOM NUMBER
var randomNumber1 = Math.random();
randomNumber1 = Math.random() * 6;
randomNumber1 = (Math.floor(Math.random() * 6)) + 1;
// SECOND PLAYER CREATE RANDOM NUMBER
var randomNumber2 = Math.random();
randomNumber2 = Math.random() * 6;
randomNumber2 = Math.floor(Math.random() * 3) + 1;
function images1() {
if(randomNumber1 === 1) {
document.querySelector(".img1").setAttribute("src", "images/rockPaperScissors1.png");
}
else if(randomNumber1 === 2) {
document.querySelector(".img1").setAttribute("src", "images/rockPaperScissors2.png");
}
else{
document.querySelector(".img1").setAttribute("src", "images/rockPaperScissors3.png");
}
}
function images2() {
if(randomNumber2 === 1) {
document.querySelector(".img2").setAttribute("src", "images/rockPaperScissors1.png");
}
else if(randomNumber2 === 2) {
document.querySelector(".img2").setAttribute("src", "images/rockPaperScissors2.png");
}
else{
document.querySelector(".img2").setAttribute("src", "images/rockPaperScissors3.png");
}
}
images1();
images2();
The main challenge lies in getting the functions to update the images based on randomNumber1 and randomNumber2 when they equal 1, 2, or 3. QuerySelector and SetAttribute must be utilized for this task, which has proven to be trickier than anticipated.