Is it possible to make getElementById part of a function?-CodePudding

I'm trying to set player1's choice to an option from an array but I have no idea if I'm even close to the right track. Can I put document.getElementById into a function the way I have here?

edit: added the full HTML and JS code so you can see what I'm working on.

let cpu = {
  currentChoice: null,
};
let player1 = {
  currentChoice: null,
};

const choices = ["Lapis", "Papyrus", "Scalpellus"]; //makes the variable array 'choices'

function computerChooses() {
  const cpuMove = Math.floor(Math.random() * 3); // returns a random integer from 0 to 2, which will become the computer's move in the next line of code

  cpu.currentChoice = choices[cpuMove]; //makes the integer from computerChooses the computer's move 
}

function playerChooses() {
  if (document.getElementById('0').onClick) {
    player1.currentChoice = choices[0];
  } else if (document.getElementById('1').onClick) {
    player1.currentChoice = choices[1];
  } else if (document.getElementById('2').onClick) {
    player1.currentChoice = choices[2];
  }
}

playerChooses();

function compareChoices() {

  computerChooses(); //call the computer choice function inside the compare choices function
  if (cpu.currentChoice === player1.currentChoice) { //if there's a tie
    displayWinner("Tie! CPU and Player1 both chose "   cpu.currentChoice);
  } else if (cpu.currentChoice === choices[0]) {
    if (player1.currentChoice === choices[1]) {
      displayWinner("Player1 wins! CPU chose "   cpu.currentChoice   " and Player1 chose "   player1.currentChoice);
    } else {
      displayWinner("CPU chose "   cpu.currentChoice   " and Player1 chose "   player1.currentChoice);
    }

  } else if (cpu.currentChoice === choices[1]) {
    if (player1.currentChoice === choices[2]) {
      displayWinner("Player1 wins! CPU chose "   cpu.currentChoice   " and Player1 chose "   player1.currentChoice);
    } else {
      displayWinner("CPU wins! CPU chose "   cpu.currentChoice   " and Player1 chose "   player1.currentChoice);
    }
  } else if (cpu.currentChoice === choices[2]) {
    if (player1.currentChoice === choices[0]) {
      displayWinner("Player1 wins! CPU chose "   cpu.currentChoice   " and Player 1 chose "   player1.currentChoice);
    } else {
      displayWinner("CPU wins! CPU chose "   cpu.currentChoice   " and Player1 chose "   player1.currentChoice);
    }
  }
}
compareChoices();

function displayWinner(result) {
  const whoWon = document.createElement('p');
  whoWon.innerText = result;
  document.body.appendChild(whoWon);
}

<h1>Rock, Paper, Scissors for Romans!</h1>
<h2>Let's get into it: Lapis, Papyrus, Scalpellus</h2>
<p>Look, it's the same, we just changed it to Latin words. There you go. You know how to play Rock, Paper, Scissors.<br> <br>Make your move: </p>
<button id="0">Lapis</button>
<button id="1">Papyrus</button>
<button id="2">Scalpellus</button>

} }

CodePudding user response：

element's id don't start with a number

let d1s = document.getElementsByClassName("d1")

var player = {}

for(let i=0;i<d1s.length;i  ){
  d1s[i].onclick = function(){
    player.select = d1s[i].innerText
    d2.innerText = player.select
  }
}

<div>
  <div >a</div> <div >b</div> <div >c</div>
</div>

<div id="d2"></div>

CodePudding user response：

give all the buttons a class so you can select them if you end up having other buttons and add a data attribute

    <button  data-choice="Paper">Lapis</button>
    <button  data-choice="Rock">Papyrus</button>
    <button  data-choice="Scissors">Scalpellus</button>

then select all buttons and add an event listener and set the player choice to that data attribute.

const buttons = document.querySelectorAll('.btn-choice');
let playerChoice = '';

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    playerChoice = button.dataset.choice;
    console.log(playerChoice);
  });
});

CodePudding user response：

To make things easier let's add a class to these buttons:

<button name="rock"  id="1">Rock</button>
<button name="paper"  id="2">Paper</button>
<button name="scissors"  id="3">Scissors</button>

Then in JS we can do the following:

document.querySelectorAll(".choice-btn").forEach((node) => {
    node.onclick = (e) => {
        console.log(e.target.name);
    };
});

Instead of console logging you can do what you need to do with the result.

Hope this helps.

Cheers!