Function is not right called in Javascript Rock, Paper Sciccors game inserted alert not showing

Question

In the console is see that PlayerOneInput and PlayerTwoInput are correct so PlayerOneInput = this.textContent is working,

The function is called, because "Its a Tie!" is working.After that is stops my test alert alert('Hello! I am an alert box!!') is not called.

Please help me. I checked everything.

const options = document.querySelectorAll('.options')
var timesClicked = 0

//console.log(options)

let playerOneInput = ''
let playerTwoInput = ''

options.forEach((option) => {
  option.addEventListener('click', function() {
    timesClicked++
    console.log(timesClicked)

    if (timesClicked == 1) {
      playerOneInput = this.textContent
      document.getElementById('player').innerHTML =
        'Player 2, choose your option!'
    } else {
      playerTwoInput = this.textContent
      compareInputs(playerOneInput, playerTwoInput)
    }
    console.log(playerOneInput.trim())
    console.log(playerTwoInput.trim())
  })
})

function compareInputs(playerOneInput, playerTwoInput) {
  // Tie check
  if (playerOneInput == playerTwoInput) {
    document.getElementById('result').innerHTML = 'Its a Tie!'

  }

  // Rock
  if (playerOneInput == 'Rock') {
    alert('Hello! I am an alert box!!')
    switch (playerTwoInput) {
      case 'Sciccors':
        document.getElementById('result').innerHTML = 'Player one wins!'
        break
      case 'Paper':
        document.getElementById('result').innerHTML = 'Player two wins!'
        break
    }
  }

  // Paper

  if (playerOneInput == 'Paper') {
    switch (playerTwoInput) {
      case 'Rock':
        document.getElementById('result').innerHTML = 'Player one wins!'
        break
      case 'Sciccors':
        document.getElementById('result').innerHTML = 'Player two wins!'
        break
    }
  }

  // Scissors
  if (playerOneInput == 'Sciccors') {
    switch (playerTwoInput) {
      case 'Paper':
        document.getElementById('result').innerHTML = 'Player one wins!'
        break
      case 'Rock':
        document.getElementById('result').innerHTML = 'Player two wins!'
        break
    }
  }

}

<h1 id="player">Player 1, choose your option!</h1>

<div id="buttons">
  <button class="options">
        Rock<img src="rock.jpg" alt="Hand gesture of rock" />
      </button>
  <button class="options">
        Paper<img src="paper.png" alt="Hand gesture of paper" />
      </button>
  <button class="options">
        Scissors<img src="scissors.png" alt="Hand gesture of scissors" />
      </button>
</div>
<br /><br />
<div id="result"></div>

Answer 1

1. Most probably it's due to the white space characters introduced when fetching the text using textContent. See here for ways to trim the white space in a string.

2. There's a typo in the script. HTML says Scissors whereas the script says Sciccors.

// credit: https://stackoverflow.com/a/6623263/6513921

if (timesClicked == 1) {
  playerOneInput = this.textContent.replace(/\s/g,'');
  document.getElementById('player').innerHTML =
    'Player 2, choose your option!';
} else {
  playerTwoInput = this.textContent.replace(/\s/g,'');
  compareInputs(playerOneInput, playerTwoInput);
}

Working example:

const options = document.querySelectorAll('.options')
var timesClicked = 0

//console.log(options)

let playerOneInput = ''
let playerTwoInput = ''

options.forEach((option) => {
  option.addEventListener('click', function() {
    timesClicked++
    console.log(timesClicked)

    if (timesClicked == 1) {
      playerOneInput = this.textContent.replace(/\s/g,'');
      document.getElementById('player').innerHTML =
        'Player 2, choose your option!';
    } else {
      playerTwoInput = this.textContent.replace(/\s/g,'');
      compareInputs(playerOneInput, playerTwoInput);
    }
    console.log(playerOneInput.trim())
    console.log(playerTwoInput.trim())
  })
})

function compareInputs(playerOneInput, playerTwoInput) {
  // Tie check
  if (playerOneInput == playerTwoInput) {
    document.getElementById('result').innerHTML = 'Its a Tie!'

  }

  // Rock
  if (playerOneInput == 'Rock') {
    alert('Hello! I am an alert box!!')
    switch (playerTwoInput) {
      case 'Scissors':
        document.getElementById('result').innerHTML = 'Player one wins!'
        break
      case 'Paper':
        document.getElementById('result').innerHTML = 'Player two wins!'
        break
    }
  }

  // Paper

  if (playerOneInput == 'Paper') {
    switch (playerTwoInput) {
      case 'Rock':
        document.getElementById('result').innerHTML = 'Player one wins!'
        break
      case 'Scissors':
        document.getElementById('result').innerHTML = 'Player two wins!'
        break
    }
  }

  // Scissors
  if (playerOneInput == 'Scissors') {
    switch (playerTwoInput) {
      case 'Paper':
        document.getElementById('result').innerHTML = 'Player one wins!'
        break
      case 'Rock':
        document.getElementById('result').innerHTML = 'Player two wins!'
        break
    }
  }

}

<h1 id="player">Player 1, choose your option!</h1>

<div id="buttons">
  <button class="options">
        Rock<img src="rock.jpg" alt="Hand gesture of rock" />
      </button>
  <button class="options">
        Paper<img src="paper.png" alt="Hand gesture of paper" />
      </button>
  <button class="options">
        Scissors<img src="scissors.png" alt="Hand gesture of scissors" />
      </button>
</div>
<br /><br />
<div id="result"></div>