why is my button not functioning properly?-CodePudding

I am watching a video from YouTube for a project, a simple rock paper and scissors game. Based on what I have completed I should be able to click the lets play button and the intro screen should fade out, but it is not working. My guess could be there is something wrong in the js file but I can't pinpoint the issue.

const game = () => {
  let pScore = 0;
  let cScore = 0;

  const startGame = () => {
    const playBtn = document.querySelector('.intro button');
    const introScreen = document.querySelector('.intro');
    const match = document.querySelector('.match');

    playBtn.addEventListener('click', () => {
      introScreen.classList('.fadeOut');

    });
  };
};

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  height: 100vh;
  background-color: rgb(39, 41, 68);
  font-family: sans-serif;
}

.score {
  color: rgb(224, 224, 224);
  height: 20vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.score h2 {
  font-size: 30px;
}

.score p {
  text-align: center;
  padding: 10px;
  font-size: 25px;
}

.intro {
  background-color: rgb(39, 41, 68);
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  transition: opacity 0.5s ease;
}

.intro h1 {
  font-size: 50px;
}

.intro button,
.match button {
  width: 150px;
  height: 50px;
  font-size: 20px;
  background: none;
  border: none;
  color: rgb(45, 117, 96);
  border-radius: 3px;
  background-color: rgb(45, 117, 96);
  color: rgb(224, 225, 224);
  cursor: pointer;
}

.match {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease 0.5s;
}

.winner {
  color: rgb(224, 224, 224);
  text-align: center;
  font-size: 50px;
}

.hands,
.options {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.Player-hand {
  transform: rotatey(180deg);
}

div.fadeOut {
  opacity: 0;
  pointer-events: none;
}

div.fadeIn {
  opacity: 1;
  pointer-events: all;
}

<section>
  <div >
    <div >
      <h2>Player</h2>
      <p>0</p>
    </div>
    <div >
      <h2>Computer</h2>
      <p>0</p>
    </div>
  </div>
  <div >
    <h1>Rock paper scissors</h1>
    <button>Let's Play</button>
  </div>
  <div >
    <h2 >Choose an option</h2>
    <div >
      <img  src="./assets/rock.png" alt="">
      <img  src="./assets/rock.png" alt="">
    </div>
    <div >
      <button>rock</button>
      <Button>paper</button>
      <button>scissors</button>

    </div>
  </div>
</section>

CodePudding user response：

There is no such method like classList()

You should do:

introScreen.classList.add('fadeOut');

Source: Element.classList

By the way, you don't call these functions anywhere. I would expect it to be something like:

const game = ()=> {
    let pScore = 0;
    let cScore = 0;

    const startGame = () => {
       const playBtn = document.querySelector('.intro button');
       const introScreen = document.querySelector('.intro');
       const match = document.querySelector('.match');

          playBtn.addEventListener('click', () =>{
             introScreen.classList('.fadeOut');
          });
    };
    startGame();
  
};
game();

CodePudding user response：

Well I see only one problem here, element.classList() is not a function (just as @TwistedOwl said). If you want to change (or in this case, add) a class to the selected element I would recommend you to use element.setAttribute("class",className) or element.classList.add(className). For example:

introScreen.setAttribute("class","fadeOut")
//fadeOut without the "." point