Hello i have an issue with a game i am creating

JavaScript
1 
let playerCharacterType = "mage";
const characterContainer = document.getElementById('character_container');
const characterContainerL = document.getElementById('character_containerL');



function changeCharacterRight() {
    if(playerCharacterType == "mage") {
        playerCharacterType = "archer";
        characterContainer.classList.remove('mageCl');
        characterContainer.classList.add('archerCl');
        console.log(playerCharacterType);
    } else if (playerCharacterType == "archer") {
        characterContainer.classList.remove('archerCl');
        characterContainer.classList.add('warriorCl');
        playerCharacterType = "warrior";
        console.log(playerCharacterType);
    }else if (playerCharacterType == "warrior") {
        characterContainer.classList.remove('warriorCl');
        characterContainer.classList.add('mageCl');
        playerCharacterType = "mage";
        console.log(playerCharacterType);
    }
}
function changeCharacterLeft() {
    if(playerCharacterType == "mage") {
        playerCharacterType = "warrior";
        characterContainer.classList.remove('mageCl');
        characterContainer.classList.add('warriorCl');
        console.log(playerCharacterType);
    } else if (playerCharacterType == "archer") {
        characterContainer.classList.remove('archerCl');
        characterContainer.classList.add('mageCl');
        playerCharacterType = "mage";
        console.log(playerCharacterType);
    }else if (playerCharacterType == "warrior") {
        characterContainer.classList.remove('warriorCl');
        characterContainer.classList.add('archerCl');
        playerCharacterType = "archer";
        console.log(playerCharacterType);
    }
}
function saveCharacterForLevelOne(){
    if (playerCharacterType == "mage") {
        characterContainerL.classList.add('mageCl');
        characterContainerL.classList.remove('warriorCl');
        characterContainerL.classList.remove('archerCl');
    }else if (playerCharacterType == 'warrior') {
        characterContainer.classList.add('warriorCl');
        characterContainer.classList.remove('mageCl');
        characterContainer.classList.add('archerCl');

    }else if (playerCharacterType == 'archer') {
        characterContainerL.classList.add('archerCl');
        characterContainerL.classList.remove('mageCl');
        characterContainerL.classList.add('warriorCl');

    }
}


#character_containerL {
    width: 400px;
    height: 400px;
    z-index: 100;
    position: absolute;
    bottom: 0;
    left: 2%;
    border-bottom: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="leve.css">
    <title>The Game</title>
</head>
<body onload="saveCharacterForLevelOne()">
  <div id="character_containerL"></div>

<script src="app.js"></script>
</body>
</html>

  * {
    box-sizing: border-box;
  }
  h1 {
    position: absolute;
    color: black;
    z-index: 100;
    left: 38%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-shadow: purple 2px 2px;
    top: 10%;
  }
  .PlayButton {
    position: absolute;
    z-index: 100;
    left: 40%;
    bottom: 10%;
    cursor: pointer;
  }
  button {
    width: 250px;
    height: 35px;
    background-color: green;
    font-size: x-large;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    cursor: pointer;
  }
  body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
  }
  .arrowOne {
    z-index: 100; 
    width: 200px;
    height: 200px;
    position: absolute;
    top: 40%;
    left: 15%;
    cursor: pointer;
  }
  .arrowTwo {
    z-index: 100; 
    width: 200px;
    height: 200px;
    position: absolute;
    top: 40%;
    right: 15%;
    transform: rotate(180deg);
    cursor: pointer;
  }
  .warriorCl {
    background-image: url('warrior.png');
    background-repeat: no-repeat;
  }
  .archerCl {
    background-image: url('archer.png');
    background-repeat: no-repeat;
  }
  .mageCl {
    background-image: url("mage.png");
  }
  .character_container {
    width: 400px;
    height: 400px;
    z-index: 100;
    position: absolute;
    bottom: 20%;
    left: 35%;
    border-bottom: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>The Game</title>
</head>
<body>
  <h1>Choose your character</h1>
    <div class="character_container mageCl" id="character_container"></div>
    <div class="arrowOne" onclick="changeCharacterLeft()"><img src="arrow.png"></div>
    <div class="arrowTwo" onclick="changeCharacterRight()"><img src="arrow.png"></div>
  <a href="level.html" class="PlayButton"><button>Play</button></a>
<script src="app.js"></script>
</body>
</html>

Everything works fine but the 2nd page when is loaded I wanted to add a class when the player chooses mage a mage and when warrior a warrior but for some reason it always adds class of mage

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.