反正有沒有縮短這個javascript代碼？

Question

我是 Javascript 初學者，我正在嘗試將石頭剪刀布游戲作為初學者練習項目。 我寫了一段代碼來分配玩家的移動。 我在頁面上有三個按鈕用於各自的動作

這是我編寫的用於將值分配給 Player move 變量的代碼-

const paper =document.getElementById('paper');
const scissor = document.getElementById('scissor')
const rock = document.getElementById('rock')

paper.addEventListener('click', function (){movePlayer = "paper"; })
rock.addEventListener('click', function (){movePlayer = "rock"; })
scissor.addEventListener('click', function (){movePlayer = "scissor";})

ID 石頭、紙、剪刀用於相應的按鈕。

我覺得有一種更短的方法可以做到這一點。 這是我第一次使用 Stack Overflow

Answer 1

SO通常不進行代碼審查。 但是你來了

['paper','scissor','rock'].forEach(hand => document.getElementById(hand) 
  .addEventListener('click', function() { movePlayer = this.id }));

但為什么不委托？

 let movePlayer; const showMove = () => console.log(movePlayer); document.getElementById("handContainer").addEventListener('click', function(e) { const tgt = e.target; if (tgt.classList.contains("hand")) { movePlayer = tgt.id; showMove(); } });

 <div id="handContainer"> <div class="hand" id="paper">Paper</div> <div class="hand" id="scissors">Scissors</div> <div class="hand" id="rock">Rock</div> <div class="hand" id="lizard">Lizard</div> <div class="hand" id="spock">Spock</div> </div>

Answer 2

您可以使用數組和循環：

for (const type of ["rock", "paper", "scissor"]) {
    document.getElementById(type).addEventListener("click", () => {
        movePlayer = type;
    });
}

或者forEach ，這也是一個循環，只是一個不太明顯的循環。

---

旁注：通常是“剪刀”而不是“剪刀”。

Answer 3

您可以收聽您的div元素點擊事件。 然后在你的點擊函數中獲取元素id並像這樣設置movePlayer ：

 document.querySelectorAll('div').forEach((div) => { div.addEventListener('click', function() { movePlayer = this.id }) })

編輯：您可以為元素分配一個類並使用document.querySelectorAll('.classname')

Answer 4

想到使用事件委托

document.addEventListener("click", evt => {
  const origin = evt.target.closest("#rock, #paper, #scissor");
  if (origin) { movePlayer = origin.id; }
});

演示：

 document.addEventListener("click", evt => { const origin = evt.target.closest("#rock, #paper, #scissor"); if (origin) { movePlayer = origin.id; // for demo const picked = document.querySelector(".picked"); const movePlayerId = document.querySelector(".movePlayer"); picked && picked.classList.remove("picked"); movePlayerId && movePlayerId.classList.remove("movePlayer"); origin.firstChild.classList.add("picked"); origin.classList.add("movePlayer"); } });

 div { cursor: pointer; margin: 5px; } .picked { border-color: red; } div.movePlayer:after { content: ' > movePlayer now: 'attr(id); color: green; } span { padding: 3px; border: 1px solid transparent; }

 <div id="paper"><span>Paper</span></div> <div id="scissor"><span>Scissor</span></div> <div id="rock"><span>Rock</span></div>