是否有任何方法可以缩短此javascript代码？

我是一名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岩石、纸张、剪刀分别用于各个按钮

我觉得有一个较短的方法可以做到这一点。 这是我第一次遇到堆栈溢出，所以通常不进行代码检查。但是给你

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

但为什么不授权呢

让我们移动玩家； const showMove==>console.logmovePlayer； document.getElementByIdhandContainer.addEventListener'click'，函数E{ 常数tgt=e.target； 如果tgt.classList.containshand{ movePlayer=tgt.id； showMove； } }; 纸张 剪刀 岩石 蜥蜴 斯波克 所以通常不做代码审查。但是给你

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

但为什么不授权呢

让我们移动玩家； const showMove==>console.logmovePlayer； document.getElementByIdhandContainer.addEventListener'click'，函数E{ 常数tgt=e.target； 如果tgt.classList.containshand{ movePlayer=tgt.id； showMove； } }; 纸张 剪刀 岩石 蜥蜴 斯波克

---

可以使用数组和循环：

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

或者forEach，这也是一个循环，只是一个不太明显的循环

---

旁注：它通常是剪刀而不是剪刀。

您可以使用数组和循环：

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

或者forEach，这也是一个循环，只是一个不太明显的循环

旁注：它通常是剪刀而不是剪刀。

您可以收听您的div元素单击事件。然后在单击函数中，获取元素id并设置movePlayer，如下所示：

document.queryselectoral'div'.forEachdiv=>{ div.addEventListener'click'，函数{ movePlayer=this.id } } 您可以侦听div元素单击事件。然后在单击函数中，获取元素id并设置movePlayer，如下所示：

document.queryselectoral'div'.forEachdiv=>{ div.addEventListener'click'，函数{ movePlayer=this.id } } 用弹簧来记忆

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

演示：

document.addEventListenerclick，evt=>{ const origin=evt.target.closestrock、纸张、剪刀； 如果起源{ movePlayer=origin.id； //演示 const picked=document.querySelector.picked； const movePlayerId=document.querySelector.movePlayer； picked&&picked.classList.removepicked； movePlayerId&&movePlayerId.classList.removemovePlayer； origin.firstChild.classList.addpicked； origin.classList.addmovePlayer； } }; div{ 光标：指针； 保证金：5px； } .挑选{ 边框颜色：红色； } 队员：在后面{ 内容：'>movePlayer now:'attrid； 颜色：绿色； } 跨度{ 填充：3倍； 边框：1px实心透明； } 纸张 剪 岩石记住使用弹簧

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

演示：

document.addEventListenerclick，evt=>{ const origin=evt.target.closestrock、纸张、剪刀； 如果起源{ movePlayer=origin.id； //演示 const picked=document.querySelector.picked； const movePlayerId=document.querySelector.movePlayer； picked&&picked.classList.removepicked； movePlayerId&&movePlayerId.classList.removemovePlayer； origin.firstChild.classList.addpicked； origin.classList.addmovePlayer； } }; div{ 光标：指针； 保证金：5px； } .挑选{ 边框颜色：红色； } 队员：在后面{ 内容：'>movePlayer now:'attrid； 颜色：绿色； } 跨度{ 填充：3倍； 边框：1px实心透明； } 纸张 剪

---

RockWell，有.movePlayer=this.idWell，有.movePlayer=this.ids，它将侦听页面上的所有div，不管它们表示什么，并将不必要的事件侦听器添加到不相关的div。它将侦听页面上的所有div，不管它们表示什么，并将不必要的事件侦听器添加到不相关的div。