So what I'm trying to do is visually lower the health bar using a progress bar depending on certain conditions.
const bgURLs = {
"Air": "https://media1.giphy.com/media/RK7pdHVS4N7he/source.gif",
"Fire": "https://i.gifer.com/5NOX.gif",
"Water": "https://steamuserimages-a.akamaihd.net/ugc/947328402825377319/20625B881E545FF98AF1A48BAC52D4CBD207101B/",
};
let options = document.getElementById("Options")
let computerChoice = getComputerChoice()
let playerChoice = ''
let updatePlayerChoice = Options.addEventListener("click", function(e) {
playerChoice = e.target.id;
return playerChoice
})
function getComputerChoice() {
const keys = Object.keys(bgURLs);
const randomIndex = [Math.floor(Math.random() * keys.length)]
const compChoice = keys[randomIndex]
return compChoice
}
// image shows up after clicked function
Options.addEventListener("click", function(e) {
let tgt = e.target;
let player = document.getElementById("Player")
let computer = document.getElementById("Computer")
if (tgt.classList.contains("element")) {
player.style.backgroundImage = 'url(' + bgURLs[tgt.id] + ')';
computer.style.backgroundImage = 'url(' + bgURLs[computerChoice] + ')';
}
})
let playerHealth = document.getElementById("player-health").getAttribute("value")
let computerHealth = document.getElementById("computer-health").getAttribute("value");
function compareChoices() {
if (playerChoice === "Fire" & computerChoice === "Water") {
playerHealth -= 25
} else if (playerChoice === "Fire" & computerChoice === "Air") {
playerHealth -= 25
} else if (playerChoice === "Fire" & computerChoice === "Fire") {
playerHealth -= 25
}
}<body>
<h1>Rock, Paper, Scissors</h1>
<h2>Elements Edition</h2>
<h3>Choose Your Element</h3>
<div id="Options" >
<div id="PlayerBar">
<p>Player Health</p>
<progress id="player-health" value="100" max="100">
</progress>
</div>
<div id="Air" class="element" >
<p>Air</p>
</div>
<div id="Fire" class="element" >
<p>Fire</p>
</div>
<div id="Water" class="element" >
<p>Water</p>
</div>
<div id="ComputerBar">
<p>Computer Health</p>
<progress id="computer-health" value="100" max="100">
</progress>
</div>
</div>
<div id="Play-Area">
<div id="Player">
</div>
<div id="Computer">
</div>
</div>I figured the main problem is my logic with the last function. What my code does is it listens for the playerChoice using an event listener, which then gives me return value I can use to compare answers with the computer choice. This part of the code works for sure. But i can't seem to target the value attribute to update it based on one of those conditions. When I try console.log playerHealth or computerHealth to see if anything happens it still remains at 100, which is the max value I've set it as. Shouldn't my code visually lower the progress bar depending on my conditions?
