反正有没有缩短这个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>