So I’m making a rock, paper, scissors game using html,css and javascript but it doesn’t work properly because it only says draw when I choose the same options for both of the drop down lists but it doesn’t say anything when I choose different options but it should say who wins. Here is my html code:
<form name="game">
<table>
<tr>
<td style="padding:10px"><label style="color:#FF0000">Player one name:</label></td>
<td style="padding:10px"><input type="text" name="playeronename" id="playeronename"
placeholder="Player one name"
style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; ">
</td>
</tr>
<tr>
<td style="padding:10px"><label style="color:#FF0000" for="cars">Choose rock,paper or
scissors:</label></td>
<td style="padding:10px"> <select name="cars1" id="cars1"
style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; ">
<option value="Rock">Rock</option>
<option value="Paper">Paper</option>
<option value="Scissors">Scissors</option>
</select></td>
</tr>
<tr>
<td style="padding:10px"><label style="color:#FF0000">Player two name:</label></td>
<td style="padding:10px"><input type="text" name="playertwoname" id="playertwoname"
placeholder="Player two name"
style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; ">
</td>
<tr>
<td style="padding:10px"><label style="color:#FF0000" for="cars">Choose rock,paper or
scissors:</label></td>
<td style="padding:10px"> <select name="cars2" id="cars2"
style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; ">
<option value="Rock">Rock</option>
<option value="Paper">Paper</option>
<option value="Scissors">Scissors</option>
</select></td>
</tr>
<tr>
<td style="padding:10px"><button
style="background-color:#D4D4D4; color:#FCFF00; padding:10px 15px 10px 15px;width:70px;border-color:#ff0000;border-width:2px"
type="button" onclick="play(cars1,cars2)">Play</button></td>
</tr>
</table>
</form>
<div style="color:#FF0000;padding:10px" class="result"></div>
Here is my javascript code:
$("#game").submit(function (e) {
e.preventDefault();
});
function play(cars1, cars2) {
let result = document.querySelector('.result');
let player1 = document.getElementById('cars1');
let PLAYER1 = player1.value;
let player2 = document.getElementById('cars2');
let PLAYER2 = player2.value;
let playeronename = document.getElementById('playeronename')
let name1 = playeronename.value;
let playertwoname = document.getElementById('playertwoname')
let name2 = playertwoname.value;
if (PLAYER1 === PLAYER2) {
result.textContent = "Draw"
}
if (PLAYER1 === "Paper") {
if (PLAYER2 === "Rock") {
result.textContent = `${name1} wins`;
} else {
if (PLAYER2 === "Scissors") {
result.textContent = `${name2} wins`;
}
}
if (PLAYER1 === "Scissors") {
if (PLAYER2 === "Rock") {
result.textContent = `${name2} wins`;
} else {
if (PLAYER2 === "Paper") {
result.textContent = `${name1} wins`;
}
}
}
}
}
So what is wrong with my code? What have I done wrong?