I am working on a Rock, Paper, Scissor page. I made a results page that is loaded after the computer showcase what it choose. What I would like is that base on the results, TWO images change in the result page. I made functions that have the Attributes I want to change but I can't figures out how to make the page run these functions once the result Page is loaded. I am super new to Javascript, so any help would be appreciate it!
const getResult = () => {
computerChoice = rand(0, 3);
finalChoice = imgs[computerChoice];
computer.src = `img/${finalChoice}.png`
computerButton.innerHTML = finalChoice;
console.log(computer.src);
// console.log(imgs.indexOf(finalChoice));
computerIndex = imgs.indexOf(finalChoice)
userChoice = 1;
if (userChoice === computerIndex) {
console.log("is a tied");
setTimeout("resultPage()", 1000);
} else if (userChoice < computerIndex) {
console.log("you win");
setTimeout("resultPage()", 1000);
} else if (userChoice > computerIndex) {
console.log("you lost")
setTimeout("resultPage()", 1000);
}
}
const resultPage = () => {
window.location = "finalResult.html";
}
function loseAttributes() {
let weaponImg = document.querySelector(".finalweapon");
let resultLabel = document.querySelector(".result");
weaponImg.src = "img/weapons-10.png";
resultLabel.src = "img/label2.png";
}
function tieAttributes() {
let weaponImg = document.querySelector(".finalweapon");
weaponImg.src = "img/Scissors.png";
let resultLabel2 = document.querySelector(".result");
resultLabel2.src = "img/label3.png";
}
CodePudding user response:
Well one way to pass a parameter to html page is using the url. So when winning redirect to finalResult.html#win
if lose then finalResult.html#lose
etc.
Then on load event of the finalResult.html get those parameter using window.location.hash
// finalResult.html
window.addEventListener('load', function() {
var hash = window.location.hash
if (hash === "#win") {
// show win image
}
if (hash === "#lose") {
// show lose image
}
})