Javascript 有没有更有效的方法来编写我的JS？

所以我有一排钮扣

        <form class="form">
      <div class="button-box">
        <div class="centered-buttons">
          <input type="radio" name="game" id="rock-button" class="radio" />
          <label for="rock-button">rock</label>
          <br />
          <input type="radio" name="game" id="paper-button" class="radio" />
          <label for="paper-button">Paper</label>
          <br />
          <input
            type="radio"
            name="game"
            id="scissor-button"
            class="radio"
          />
          <label for="scissor-button">Scissor</label>
        </div>
      </div>

      <input type="submit" id="submit-btn" value="submit" />
    </form>

---

简而言之，当按下按钮时，与按钮相关的图像将获得属性

display:block和我不想显示的每一个其他图像将获得属性
display:none
只有一个changePicToRock方法实现就足够了，您不需要为所有侦听器编写相同的方法


在此处输入代码
让rock=document.getElementById（“rock按钮”）；
让paper=document.getElementById（“paper按钮”）；
让剪刀=document.getElementById（“剪刀按钮”）；
rock.addEventListener（“单击”，更改PictRock）；
纸张。添加文本列表（“单击”，更改图像处理程序）；
剪式.添加的文本列表（“单击”，更改图片或）
功能更改Pictorock（e）{
让状态=['none'，'none'，'none']；
如果（e.target.id==“摇滚按钮”）{
状态[0]=“块”；
}否则如果（e.target.id==“纸张按钮”）{
状态[1]=“块”；
}否则如果（e.target.id==“剪刀按钮”）{
状态[2]=“块”；
}否则{
//处理错误状态
}
document.getElementById（“rock用户”）.style.display=状态[0]；
document.getElementById（“纸张用户”）.style.display=状态[1]；
document.getElementById（“剪刀用户”）.style.display=status[2]；
}
试试这个

const game = [{ title: 'rock', values: ['none', 'none', 'block'] },
{ title: 'paper', values: ['block', 'none', 'none'] },
{ title: 'scissor', values: ['none', 'block', 'none'] }];

game.forEach(item => {
  const button = document.getElementById(`${item.title}-button`);
  button.addEventListener("click", () => {
    console.log(item);
    document.getElementById("paper-user").style.display = item.values[0]
    document.getElementById("scissor-user").style.display = item.values[1]
    document.getElementById("rock-user").style.display = item.values[2]
  })
})

如果您有工作代码但需要改进，请转到，这样这里就没有人可以回答您的问题了？您是真的在要求更有效的方式来编写代码还是更有效的方式来编写代码？但是在这段代码中，如果我按其他按钮，将不会发生任何事情。对不起，我不在乎您的函数更改不同的显示值。我更新了我的答案，rock user、paper user、scissor user元素将根据事件目标进行更新。
let rock = document.getElementById("rock-button")

rock.addEventListener("click", changePicToRock)

function changePicToRock(e){

  document.getElementById("paper-user").style.display = "none"
  document.getElementById("scissor-user").style.display = "none"
  document.getElementById("rock-user").style.display = "block"

}

let paper = document.getElementById("paper-button")

paper.addEventListener("click", changePicToPaper)

function changePicToPaper(e){

  document.getElementById("paper-user").style.display = "block"
  document.getElementById("scissor-user").style.display = "none"
  document.getElementById("rock-user").style.display = "none"
}


let scissor = document.getElementById("scissor-button")

scissor.addEventListener("click", changePicToScissor)

function changePicToScissor(e){

  document.getElementById("paper-user").style.display = "none"
  document.getElementById("scissor-user").style.display = "block"
  document.getElementById("rock-user").style.display = "none"

}

const game = [{ title: 'rock', values: ['none', 'none', 'block'] },
{ title: 'paper', values: ['block', 'none', 'none'] },
{ title: 'scissor', values: ['none', 'block', 'none'] }];

game.forEach(item => {
  const button = document.getElementById(`${item.title}-button`);
  button.addEventListener("click", () => {
    console.log(item);
    document.getElementById("paper-user").style.display = item.values[0]
    document.getElementById("scissor-user").style.display = item.values[1]
    document.getElementById("rock-user").style.display = item.values[2]
  })
})