New to coding,I can't figure out why my javascript buttons are not working properly?

Here's the code:https://codepen.io/bryans98/pen/wvMeJzB

So each button is supposed to trigger a choice but for some reason, each button represents lapis every time! I can't find out how to fix it please help!

const player = {
  currentChoice: null
}
const computer = {
  currentChoice: null
}
const choices = ["Lapis", "Papyrus", "Scalpellus"]
player.currentChoice = choices[0];

function computerChooses() {
  const randomIndex = Math.floor(Math.random() * choices.length);
  computer.currentChoice = choices[randomIndex];
}

function compareChoices() {
  computerChooses();
  if (computer.currentChoice === player.currentChoice) {
    displayResult("It's a tie! The computer and player both chose " + computer.currentChoice);
  } else if (computer.currentChoice === choices[0]) {
    if (player.currentChoice === choices[1]) {
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    } else {
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  } else if (computer.currentChoice === choices[1]) {
    if (player.currentChoice === choices[2]) {
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    } else {
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  } else if (computer.currentChoice === choices[2]) {
    if (player.currentChoice === choices[0]) {
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    } else {
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  }
}

function displayResult(result) {
  const resultText = document.createElement('p');
  resultText.innerText = result;

  document.body.appendChild(resultText);
}

document.getElementById('lbutton').addEventListener('click', compareChoices, displayResult);

document.getElementById('pbutton').addEventListener('click', compareChoices, displayResult);

document.getElementById('sbutton').addEventListener('click', compareChoices, displayResult);

#lbutton {
  color: black;
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 40px;
  margin: 20px;
  padding 0px 10px 0px 10px;
  position: static;
}

#pbutton {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 40px;
  margin: 20px;
  position: static;
}

#sbutton {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 40px;
  margin: 20px;
  position: static;
}

.c {
  padding: 50px 0px 50px;
}

<body>


  <h1> Welcome to the Ancient game of Lapis, Papyrus, Scalpellus!</h1>

  <div class="c">
    <button id="lbutton"><b>Lapis<b></button>
    <button id="pbutton"><b>Papyrus<b></button>
    <button id="sbutton"><b>Scalpellus<b></button>
  </div>

  <h2> The results are in...</h2>


</body>

Solution

As other people said earlier your issue lies under player.currentChoice = choices[0]; this line of your code where you always choosing the first index as a player choice. To fix this you should use event interface and change the player.currentChoice based on selected elements, so you have to use it compareChoices function.

So your function should look like this:

function compareChoices(e) {
  player.currentChoice = e.target.innerText;
  // rest of your function
}

Then your final code will work as expected:

const player = {
  currentChoice: null
}
const computer = {
  currentChoice: null
}
const choices = ["Lapis", "Papyrus", "Scalpellus"]


function computerChooses() {
  const randomIndex = Math.floor(Math.random() * choices.length);
  computer.currentChoice = choices[randomIndex];
}

function compareChoices(e) {
  player.currentChoice = e.target.innerText;
  computerChooses();
  if (computer.currentChoice === player.currentChoice) {
    displayResult("It's a tie! The computer and player both chose " + computer.currentChoice);
  } else if (computer.currentChoice === choices[0]) {
    if (player.currentChoice === choices[1]) {
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    } else {
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  } else if (computer.currentChoice === choices[1]) {
    if (player.currentChoice === choices[2]) {
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    } else {
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  } else if (computer.currentChoice === choices[2]) {
    if (player.currentChoice === choices[0]) {
      displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    } else {
      displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
    }
  }
}

function displayResult(result) {
  const resultText = document.createElement('p');
  resultText.innerText = result;

  document.body.appendChild(resultText);
}

document.getElementById('lbutton').addEventListener('click', compareChoices, displayResult);

document.getElementById('pbutton').addEventListener('click', compareChoices, displayResult);

document.getElementById('sbutton').addEventListener('click', compareChoices, displayResult);

#lbutton {
  color: black;
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 40px;
  margin: 20px;
  padding 0px 10px 0px 10px;
  position: static;
}

#pbutton {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 40px;
  margin: 20px;
  position: static;
}

#sbutton {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 40px;
  margin: 20px;
  position: static;
}

.c {
  padding: 50px 0px 50px;
}

<body>


  <h1> Welcome to the Ancient game of Lapis, Papyrus, Scalpellus!</h1>

  <div class="c">
    <button id="lbutton"><b>Lapis</b></button>
    <button id="pbutton"><b>Papyrus</b></button>
    <button id="sbutton"><b>Scalpellus</b></button>
  </div>

  <h2> The results are in...</h2>


</body>