html – JavaScript won’t work no matter what I do

<!DOCTYPE html>
<html>
  <head>
    <title>Rock, Paper, Scissors</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
var turn = "player1";
var wins = {
    player1: 0,
    player2: 0,
    rounds: []
}
var picked = {
    player1: null,
  player2: null
}
var round = 0;
var firstthrow = true;

function player1name() {return document.getElementById('player1namein').value}
function player2name() {return document.getElementById('player2namein').value}
function gotonumwins() {return document.getElementById('numofrounds').value}
var maxrounds = 0;

function firstExplanationText() {
    turn = "player1";
  round++;
    $('.starting, .game2, .game3, .game4, .game5, .game6, .mresults').css('visibility','hidden');
  $('.game1').css('visibility','visible');
    let text = document.getElementById('beginText1');
  text.style.visibility = 'visible';
    if (gotonumwins()==1) {
    text.innerHTML = "This is standard rock, paper, scissors.  Rock breaks scissors, paper covers rock, and scissors cuts paper.  If there is a tie, then you throw hands again.  Play until someone gets a win.  " + player1name() + " will pick first, while he is doing so " + player2name() + " needs to look away from the screen. After " + player1name() + " does so, another screen with a button like this will appear preparing " + player2name() + " for their turn.";
  } else if (gotonumwins()>1) {
        text.innerHTML = "This is standard rock, paper, scissors.  Rock breaks scissors, paper covers rock, and scissors cuts paper.  If there is a tie, then you throw hands again.  Play until someone gets " + gotonumwins() + " wins, best of " + maxrounds + ".  " + player1name() + " will pick first, while he is doing so " + player2name() + " needs to look away from the screen. After " + player1name() + " does so, another screen with a button like this will appear preparing " + player2name() + " for their turn.";
    }
  game24elsReload();
  if (round == 1 && firstthrow == true) {
    $('#p1turnbtn').css('visibility','hidden');
    setTimeout(function(){$('#p1turnbtn').css('visibility','visible')},1000);
    
  }
}
function secondExplanationText() {
    turn = "player2";
    $('.starting, .game1, .game2, .game4, .game5, .game6, .mresults').css('visibility','hidden');
  $('.game3').css('visibility','visible');
    let text = document.getElementById('beginText2');
  text.style.visibility = 'visible';
  text.innerHTML = "This is standard rock, paper, scissors.  Remember, Rock breaks scissors, paper covers rock, and scissors cuts paper.  If there is a tie, then you throw hands again.  It is " + player2name() + "'s turn.  Make sure that " + player1name() + " is looking away while choosing.  Afterward round results will be displayed.";
  game24elsReload();
  if (round == 1 && firstthrow == true) {
    $('#p2turnbtn').css('visibility','hidden');
    setTimeout(function(){$('#p2turnbtn').css('visibility','visible')},1000);
  }
}

function startelsReload() {
    let tempA = "" + ((window.innerWidth/2) - 168) + "px";
  $('.p1name').css('left',tempA); //410
    let tempB = "" + ((window.innerWidth/2) + 8) + "px";
  $('.p2name').css('left',tempB); //586
  let tempC = "" + ((93+window.innerWidth)/2) + "px";
    $('#startbtn').css('left',tempC); //536.5
  let tempD = "" + ((window.innerWidth/2)-313) + "px";
  $('#warning1').css('left',tempD); //275
  let tempE = "" + ((window.innerWidth/2)+163) + "px";
  $('#warning2').css('left',tempE); //761
  let tempF = "" + ((window.innerWidth/2) - 40) + "px";
  $('#numofrounds').css('left',tempF); //540
  let tempG = "" + ((window.innerWidth/2) - 152) + "px";
  $('#roundnumtext').css('left',tempG); //438
}
function game1elsReload() {
    let tempA = "" + ((window.innerWidth/2)-243) + "px";
  $('#beginText1').css('left',tempA);
  let tempB = "" + ((window.innerWidth-48)/2) + "px";
  $('#p1turnbtn').css('left',tempB);
}
function game24elsReload() {
    let tempA = "" + (0.2*window.innerWidth) + "px";  //width
  let tempB = "" + ((0.1*window.innerWidth)-1) + "px";  //rock left
  let tempC = "" + ((0.4*window.innerWidth)-1) + "px";  //paper left
  let tempD = "" + ((0.7*window.innerWidth)-1) + "px";  //scissors left
  let tempE = "" + (0.24*window.innerWidth) + "px"; //height of image
  $('.choices').css('width',tempA).css('height',tempE).css('border','1px solid #000000').css('top','110px');
  $('.choiceText').css('width',tempA);
  $('.rock').css('left',tempB);
  $('.paper').css('left',tempC);
  $('.scissors').css('left',tempD);
  let tempF = "" + ((window.innerWidth-55)/2) + "px"; //left for button
  let tempG = "" + (125+(0.24*window.innerWidth)) + "px"; //top for button
  $('.lockinbtn').css('left',tempF).css('top',tempG);
}
function game3elsReload() {
    let tempA = "" + ((window.innerWidth/2)-243) + "px";
  $('#beginText2').css('left',tempA);
  let tempB = "" + ((window.innerWidth-48)/2) + "px";
  $('#p2turnbtn').css('left',tempB);
}
function game5elsReload() {
    let tempA = "" + ((window.innerWidth-82)/2) + "px";
    $('#playAgainbtn').css('left',tempA);
}
function game6elsReload() {
    let tempA = "" + ((window.innerWidth-62)/2) + "px";
  $('#tiedbtn').css('left', tempA);
  let tempB = "" + ((window.innerWidth/2)-243) + "px";
  $('#tiedmessage').css('left',tempB);
}
function mresultsReload() {
    let tempA = "" + window.innerWidth + "px";
  $('#winner, #winnerWins').css('width',tempA);
}
function resizeWindow(){
    let temp = "" + ((window.innerWidth-218)/2) + "px";
  $('#title').css('left',temp);
  let tempA = "" + ((window.innerWidth/2)-32) + "px";
  $('#turnPlayerName').css('left',tempA);
  startelsReload();
  game1elsReload();
  game24elsReload();
  game3elsReload();
  game5elsReload();
  game6elsReload();
  mresultsReload();
}
window.addEventListener('resize', resizeWindow());
function btnStartGame() {
    maxrounds = ((2*gotonumwins())-1);
  if (player1name().length>=4 && player2name().length>=4) {
    firstExplanationText();
  } else {
    $('.charaname').css('visibility','visible');
  }
}

function player1turn() {
    document.getElementById('turnPlayerName').innerHTML = "Player1";
    $('.starting, .game1, .game3, .game4, .game5, .game6, .mresults').css('visibility','hidden');
  $('.game2').css('visibility','visible');
}
function player2turn() {
    document.getElementById('turnPlayerName').innerHTML = "Player2";
    $('.starting, .game1, .game2, .game3, .game5, .game6, .mresults').css('visibility','hidden');
  /* $('.game1').css('visibility','hidden');
  $('.game2').css('visibility','hidden');
  $('.game3').css('visibility','hidden');
  $('.game5').css('visibility','hidden');
  $('.game6').css('visibility','hidden');
  $('.mresults').css('visibility','hidden'); */
  $('.game4').css('visibility','visible');
}

function rockChoice() {
    if (turn == "player1") {
    picked.player1 = "Rock";
  } else {
    picked.player2 = "Rock";
  }
  let tempB = "" + ((0.1*window.innerWidth)-5) + "px";  //rock left
  let tempC = "" + ((0.4*window.innerWidth)-1) + "px";  //paper left
  let tempD = "" + ((0.7*window.innerWidth)-1) + "px";  //scissors left
  $('#paper').css('left',tempC);
  $('#scissors').css('left',tempD);
  $('.choices').css('top','110px').css('border','1px solid #000000');
  $('#rock').css('left',tempB).css('top','106px').css('border','5px solid #000000');
}
function paperChoice() {
    if (turn == "player1") {
    picked.player1 = "Paper";
  } else {
    picked.player2 = "Paper";
  }
  $('.choices').css('border','1px solid #000000');
  let tempB = "" + ((0.1*window.innerWidth)-1) + "px";  //rock left
  let tempC = "" + ((0.4*window.innerWidth)-5) + "px";  //paper left
  let tempD = "" + ((0.7*window.innerWidth)-1) + "px";  //scissors left
  $('#rock').css('left',tempB);
  $('#scissors').css('left',tempD);
  $('.choices').css('top','110px').css('border','1px solid #000000');
  $('#paper').css('left',tempC).css('border','5px solid #000000').css('top','106px');
}
function scissorsChoice() {
    if (turn == "player1") {
    picked.player1 = "Scissors";
  } else {
    picked.player2 = "Scissors";
  }
  let tempB = "" + ((0.1*window.innerWidth)-1) + "px";  //rock left
  let tempC = "" + ((0.4*window.innerWidth)-1) + "px";  //paper left
  let tempD = "" + ((0.7*window.innerWidth)-5) + "px";  //scissors left
  $('#rock').css('left',tempB);
  $('#paper').css('left',tempC);
  $('.choices').css('top','110px').css('border','1px solid #000000');
  $('#scissors').css('left',tempD).css('border','5px solid #000000').css('top','106px');
}

function player1wonround() {
  wins.player1 = wins.player1 + 1;
  wins.rounds.push("player1");
  document.getElementById('p1wins').innerHTML = ("" + player1name() + " Won:<br>" + wins.player1 + "https://stackoverflow.com/" + round + " rounds so far");
  document.getElementById('p2wins').innerHTML = ("" + player2name() + " Won:<br>" + wins.player2 + "https://stackoverflow.com/" + round + " rounds so far");
  document.getElementById('gamesleft').innerHTML = ("" + (maxrounds-round) + " More Rounds Remain");
  let newel = document.createElement("P");
  let tempE = "" + (148+(20*(Math.ceil(round/5)))+(175*((Math.ceil(round/5))-1))) + "px";
  let tempF = "" + (8+(32*(round-(5*Math.floor((round-1)/5))))) + "px";
  $("#body").append(newel);
  $(newel).addClass('gameall game5 temp newele').css('width','175px').css('height','20px').css('position','absolute').css('visibility','visible').css('font','center 12px Segoe UI, sans-serif').css('left',tempE).css('top',tempF);
  wins.rounds.push("player2");
  let temptext = "" + player1name() + " has won round " + round + "";
  newel.innerHTML = temptext;
  picked.player1 = null;
  picked.player2 = null;
}
function player2wonround() {
  wins.player2 = wins.player2 + 1;
  wins.rounds.push("player2");
  document.getElementById('p1wins').innerHTML = ("" + player1name() + " Won:<br>" + wins.player1 + "https://stackoverflow.com/" + round + " rounds so far");
  document.getElementById('p2wins').innerHTML = ("" + player2name() + " Won:<br>" + wins.player2 + "https://stackoverflow.com/" + round + " rounds so far");
  document.getElementById('gamesleft').innerHTML = ("" + (maxrounds-round) + " More Rounds Remain");
  let newel = document.createElement("P");
  let tempE = "" + (148+(20*(Math.ceil(round/5)))+(175*((Math.ceil(round/5))-1))) + "px";
  let tempF = "" + (8+(32*(round-(5*Math.floor((round-1)/5))))) + "px";
  $("#body").append(newel);
  $(newel).addClass('gameall game5 temp newele').css('width','175px').css('height','20px').css('position','absolute').css('visibility','visible').css('font','center 12px Segoe UI, sans-serif').css('left',tempE).css('top',tempF);
  wins.rounds.push("player2");
  let temptext = "" + player2name() + " has won round " + round + "";
  newel.innerHTML = temptext;
  picked.player1 = null;
  picked.player2 = null;
}
function addToTable() {
    if ((picked.player1 == "Paper" && picked.player2 == "Rock") || (picked.player1 == "Rock" && picked.player2 == "Scissors") || (picked.player1 == "Scissors" && picked.player2 == "Paper")) {
        player1wonround();
  } else if ((picked.player1 == "Rock" && picked.player2 == "Paper") || (picked.player1 == "Paper" && picked.player2 == "Scissors") || (picked.player1 == "Scissors" && picked.player2 == "Rock")) {
        player2wonround();
  }
}
function roundResults() {
    $('.starting, .game1, .game2, .game3, .game4, .game6, .mresults').css('visibility','hidden');
    $('.game5').css('visibility','visible');
  if (round<maxrounds) {
    $('#roundcontinue').css('top','225px').css('left','10px').css('width','147px');
    document.getElementById("roundcontinue").value = "Continue to Next Round";
  } else if (round==maxrounds) {
    $('#roundcontinue').css('top','225px').css('left','22px').css('width','123px');
    document.getElementById("roundcontinue").value = "View Match Results";
  } 
}

function tied() {
    $('.starting, .game1, .game2, .game3, .game4, .game5, .mresults').css('visibility','hidden');
  $('.game6').css('visibility','visible');
  let temptextC = "You both threw " + picked.player1 + ".  Press the button below to throw again.";
  document.getElementById('tiedmessage').innerHTML = temptextC;
} 

function continueToNextRound() {
  if (gotonumwins()>wins.player1 && gotonumwins()>wins.player2) {
    firstExplanationText();
  } else if (round>=maxrounds || gotonumwins()==wins.player1 || gotonumwins()==wins.player2) {
    $('.temp').remove();
    $('.starting, .game1, .game2, .game3, .game4, .game5, .game6').css('visibility','hidden');
        $('.mresults').css('visibility','visible');
    if (wins.player1 == gotonumwins()) {
        document.getElementById('winner').innerHTML = "" + player1name() + " Wins";
      document.getElementById('winnerWins').innerHTML = "" + wins.player1 + " - " + wins.player2 + "";
    } else if (wins.player2 == gotonumwins()) { 
        document.getElementById('winner').innerHTML = "" + player2name() + " Wins";
      document.getElementById('winnerWins').innerHTML = "" + wins.player2 + " - " + wins.player1 + "";
    }
  }
}
function resetGame() {
    $('.gameall').css('visibility','hidden');
  turn = "player1";
  wins = {
        player1: 0,
        player2: 0,
        rounds: []
    }
  picked = {
        player1: null,
    player2: null
    }
  $('.snwarn').css('visibility','visible');
  var round = 0;
  $('.temp').remove();
}
resizeWindow();
    </script>
    <style type="text/css">
* {
  
  /* font-family: Segoe UI, sans-serif; */
  
  position: absolute;
  text-align: center;
  color: #0000ff;
}
#body {
  background: #ffa500;
}

#title {
  width: 218px;
  height: 30px;
  top: 0px;
  color: #ff0000;
}
.starting {
  width: 160px;
}
.inputS {
  top: 100px;
}
.name {
  top: 60px;
}
#startbtn {
  width: 82px;
  top: 132px;
}
.warn {
  top: 55px;
}
#roundnumtext {
  top: 117px;
  width: 109px;
}
#numofrounds {
  top: 132px;
  width: 18px;
}

#turnPlayerName {
  top: 32px;
  width: 65px;
  color: #ff0000;
}

#p1turnbtn {
  width: 48px;
  top: 215px;
}
#p2turnbtn {
  top: 160px;
  width: 48px;
}

.choiceText {
  top: 75px;
}
.choices{
  top: 110px;
  border: 1px solid #000000;
}
.lockinbtn {
  width: 55px;
}

.g5perm {
  font-size: 16px;
  width: 133px;
}
#p2wins {
  top: 100px;
}
#gamesleft {
  top: 160px;
}
#roundcontinue {
  top: 225px;
  left: 10px;
  width: 147px;
}

#tiedbtn {
  width: 62px;
  top: 90px;
}

#playAgainbtn {
  left: 20px;
  top: 125px;
  width: 82px;
}

.g5perm, .mresults {
  font-weight: bold;
}
.msg {
  width: 486px;
}
.warn, .h40 {
  height: 40px;
}
.warn, .gameall {
  visibility: hidden;
}
.t40 {
  top: 40px;
}
.l15 {
  left: 15px;
}
.f12, .choiceText, .lockinbtn, .game6 {
  font-size: 12px;
}

.inputC, .btn {
  color: #800080;
  background: #ffffff;
}
#winner {
  left: 0px;
}
#winnerWins {
  left: 0px;
  top: 78px;
  height: 20px;
}
    </style>
  </head>
  <body id="body">
    <h2 id="title">Rock, Paper, Scissors</h2>
    <p id="player1name" class="starting name p1name snwarn">Player 1 Name</p>
    <input type="text" id="player1namein" value="John Doe" class="starting inputS p1name snwarn inputC" maxlength="25"><br>
    <p id="player2name" class="starting name p2name snwarn">Player 2 Name</p>
    <input type="text" id="player2namein" value="Jane Doe" class="starting inputS p2name snwarn inputC" maxlength="25"><br>
    <input type="button" id="startbtn" value="Start Game" class="starting snwarn f12 btn" onclick="btnStartGame()">
    <p id="roundnumtext" class="starting snwarn">Number of wins:</p>
    <input type="number" id="numofrounds" class="starting snwarn f12 inputC" value="1" min="1" max="9">
    <p id="warning1" class="starting warn charaname warnl">All names must be between 4 and 25 characters!</p>
    <p id="warning2" class="starting warn charaname warnr">All names must be between 4 and 25 characters!</p>

    <h3 id="turnPlayerName" class="gameall game2 game4">Player1</h3>

    <p id="beginText1" class="gameall game1 msg t40">You should reload the page because something isn't executing right.</p>
    <input type="button" id="p1turnbtn" class="gameall game1 f12 btn" value="Begin" onclick="player1turn()">

    <p id="beginText2" class="gameall game3 msg t40">You should reload the page because something isn't executing right.</p>
    <input type="button" id="p2turnbtn" class="gameall game3 f12 btn" value="Begin" onclick="player2turn()">

    <input type="image" id="rock" class="gameall game2 game4 choices rock" src="https://lh3.googleusercontent.com/TdVmsdxCnkG2y7KfbO5SMW1u_IaTDHb8D5otyuOapZnyRdHpn_26q80GI7iTVz8VYA3C5xEKF0Vbs23B8fFWdH4syX02zpxl4kbCq2-Gp06y7DOXdAbVJh9MzN6VBxz8WiCc7dDIjQ=w2400" alt="ROCK" onclick="rockChoice()">
    <p class="gameall game2 game4 choiceText rock" id="rockText">ROCK</p>
    <input type="image" id="paper" class="gameall game2 game4 choices paper" src="https://lh3.googleusercontent.com/l_JfInLTMl7c4MM_dgxpXpUjic0OcJTL5w08DcUNFAmbODnjUkYwL4qJGOw64ybUVbqPmKukJX0UBfVGGhG-mn5VB5ye_uKttcoGHpGTlMfxxzHsG9Gxd5utUWfdbMF0sxncnIDbhA=w2400" alt="PAPER" onclick="paperChoice()">
    <p class="gameall game2 game4 choiceText paper" id="paperText">PAPER</p>
    <input type="image" id="scissors" class="gameall game2 game4 choices scissors" src="https://lh3.googleusercontent.com/xvbBtZMTY4VRnUtYQ4srlGZDBYGfO2Q3mB8p33_yJJ780ZhZdAYPsbtNU_GF860aQ8PUZK_lDhtCPU_pkTes-m38jS0A3JCmDSLlmN-hCMcdS0KCKVVoZ9dYNbdZvZYXk8EklEUa9A=w2400" alt="SCISSORS" onclick="scissorsChoice()">
    <p class="gameall game2 game4 choiceText scissors" id="scissorsText">SCISSORS</p>

    <input type="button" id="lockedp1btn" class="gameall game2 lockinbtn btn" value="Lock In" onclick="if (picked.player1 != null) {secondExplanationText()}">
    <input type="button" id="lockedp2btn" class="gameall game4 lockinbtn btn" value="Lock In" onclick="firstthrow = false; if (picked.player2 != null) {if (picked.player1 == picked.player2) {tied()} else {addToTable(); roundResults()}}">

    <p id="p1wins" class="gameall game5 g5perm h40 t40 l15">hello</p>
    <p id="p2wins" class="gameall game5 g5perm h40 l15">this doesn't work</p>
    <p id="gamesleft" class="gameall game5 g5perm h40 l15">for some reason</p>
    <input type="button" id="roundcontinue" class="gameall game5 f12 btn" value="Continue to Next Round" onclick="continueToNextRound();">

    <p id="tiedmessage" class="gameall game6 msg t40"></p>
    <input type="button" id="tiedbtn" class="gameall game6 h40 btn" value="Rethrow" onclick="round=round-1; firstExplanationText();">

    <h1 id="winner" class="gameall mresults h40 t40">YOU WIN</h1>
    <h3 id="winnerWins" class="gameall mresults">0 - 0</h3>
    <input type="button" id="playAgainbtn" class="gameall mresults btn" value="Play Again" onclick="resetGame()">

  </body>
</html>

Write a Comment