是否可以使 getElementById 成为 function 的一部分？

Question

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>

} }

Answer 1

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 class="d1">a</div> <div class="d1">b</div> <div class="d1">c</div> </div> <div id="d2"></div>

Answer 2

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

    <button class="btn-choice" data-choice="Paper">Lapis</button>
    <button class="btn-choice" data-choice="Rock">Papyrus</button>
    <button class="btn-choice" 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);
  });
});

Answer 3

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

<button name="rock" class="choice-btn" id="1">Rock</button>
<button name="paper" class="choice-btn" id="2">Paper</button>
<button name="scissors" class="choice-btn" 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!