У вас есть несколько проблем, начиная от ссылки на неправильную переменную (Options вместо options) и заканчивая фактическим обновлением значений индикатора выполнения после оценки догадок.
У вас также есть много ненужный код.
Поскольку я не уверен в том, что лучше, чем в вашей игре, вам придется настроить этот набор условий if/else if, а также добавить дополнительные очки для потери / получения компьютера. Но сейчас, если вы несколько раз нажмете fire или water, вы увидите какое-то действие. Чем более краткие условия и корректировки вы добавите, тем быстрее будут отображаться индикаторы выполнения.
Подробности см. В комментариях ниже:
const bgURLs = {
"Air": "https://media1.giphy.com/media/RK7pdHVS4N7he/source.gif",
"Fire": "https://media2.giphy.com/media/AHeTfHgVFPHgs/source.gif",
"Water": "https://steamuserimages-a.akamaihd.net/ugc/947328402825377319/20625B881E545FF98AF1A48BAC52D4CBD207101B/"
};
// Don't set variables equal to DOM element properties directly
// because every time you want a different property, you have to
// query the DOM for the same element over and over. Just get a
// reference to the element and when you want a property, just
// get it from that element reference.
let player = document.getElementById("Player");
let computer = document.getElementById("Computer");
let playerProg = document.getElementById("player-health");
let computerProg = document.getElementById("computer-health");
let options = document.getElementById("Options");
// These need to be declared so they can be accessed throughout
// the game, but their values won't be known until an event happens
let playerChoice = null;
let computerChoice = null;
let playerHealth = 100;
let computerHealth = 100;
function getComputerChoice() {
let random = Math.floor(Math.random() * Object.keys(bgURLs).length);
computerChoice = Object.keys(bgURLs)[random];
return computerChoice;
}
// You had Options here, but your variable is options
options.addEventListener("click", function(e) {
if (e.target.classList.contains("element")) {
// Set the player choices
playerChoice = e.target.id;
player.style.backgroundImage = 'url(' + bgURLs[playerChoice] + ')';
computer.style.backgroundImage = 'url(' + bgURLs[getComputerChoice()] + ')';
// Test the results:
console.clear();
console.log(playerChoice, computerChoice);
// Now update the progress bars
compareChoices();
}
})
function compareChoices() {
// Use && for logical AND short-circuiting
// Ensure that scores don't go below 0 or above 100
// Not sure what beats what so you'll have to adjust as needed.
if (playerChoice === "Air" && computerChoice === "Fire") {
playerHealth = (playerHealth += 25) > 100 ? 100 : playerHealth;
computerHealth = (computerHealth -= 25) < 0 ? 0 : computerHealth;
} else if (playerChoice === "Air" && computerChoice === "Water") {
playerHealth = (playerHealth += 25) > 100 ? 100 : playerHealth;
computerHealth = (computerHealth -= 25) < 0 ? 0 : computerHealth;
} else if (playerChoice === "Fire" && computerChoice === "Air") {
playerHealth = (playerHealth -= 25) < 0 ? 0 : playerHealth;
computerHealth = (computerHealth += 25) > 100 ? 100 : computerHealth;
} else if (playerChoice === "Fire" && computerChoice === "Water") {
playerHealth = (playerHealth -= 25) < 0 ? 0 : playerHealth;
computerHealth = (computerHealth += 25) > 100 ? 100 : computerHealth;
} else if (playerChoice === "Water" && computerChoice === "Air") {
playerHealth = (playerHealth -= 25) < 0 ? 0 : playerHealth;
computerHealth = (computerHealth += 25) > 100 ? 100 : computerHealth;
} else if (playerChoice === "Water" && computerChoice === "Fire") {
playerHealth = (playerHealth += 25) > 100 ? 100 : playerHealth;
computerHealth = (computerHealth -= 25) < 0 ? 0 : computerHealth;
}
// You must update the progress bars from within the function
// that changes their values.
playerProg.value = playerHealth;
computerProg.value = computerHealth;
}
#Player, #Computer {
width:100px;
height:50px;
background-size:contain;
background-repeat:no-repeat;
margin:5px 0;
}
.element { cursor:pointer; display:inline; font-weight:bold; }
#Play-Area { clear:both; }
#Play-Area div { display:inline-block; }
#PlayerBar, #ComputerBar {
margin:10px 10px; float:left;
}
<p>Choose Your Element</p>
<div id="Options" >
<div id="Air" class="element">Air</div>
<div id="Fire" class="element">Fire</div>
<div id="Water" class="element">Water</div>
</div>
<div id="PlayerBar">
<div>Player Health</div>
<progress id="player-health" value="100" max="100"></progress>
</div>
<div id="ComputerBar">
<div>Computer Health</div>
<progress id="computer-health" value="100" max="100"></progress>
</div>
<div id="Play-Area">
<div id="Player"></div>
<div id="Computer"></div>
</div>