Home > OS >  Changing Attributes of a page based on an if statement
Changing Attributes of a page based on an if statement

Time:10-16

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
  }
})

  • Related