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

Question

所以我有一排按钮

        <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>

当按下特定按钮（例如岩石）时，将显示岩石图像

        <figure class="image-box">
      <img
        src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.DYZMAUANlCkZudy3ecHIjgHaFj%26pid%3DApi&f=1"
        class="image"
        id="rock-user"
      />
      <img
        src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.nsZw2P8S_bGSFs1D8tUWQwHaHZ%26pid%3DApi&f=1"
        alt=""
        class="image"
        id="paper-user"
      />
      <img
        src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.dcE8dnULs2C6_wjBABvd4QHaEk%26pid%3DApi&f=1"
        alt=""
        class="image"
        id="scissor-user"
      />
    </figure>

但是我的代码很长，而且可能有点重复。我怎样才能让我的 JS 更有效？

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"

}

简而言之，当按下按钮时，与该按钮相关的图像将获得属性display: block;，而我不想显示的所有其他图像将获得属性display: none;

Answer 1

试试这个

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]
  })
})

Answer 2

只需要一个 changePicToRock 方法实现就足够了，你不需要为你拥有的每个监听器编写相同的方法。

enter code here
let rock = document.getElementById("rock-button");
let paper = document.getElementById("paper-button");
let scissor = document.getElementById("scissor-button");

rock.addEventListener("click", changePicToRock);
paper.addEventListener("click", changePicToPaper);
scissor.addEventListener("click", changePicToScissor)

function changePicToRock(e){
  let status = ['none', 'none', 'none'];

  if(e.target.id === "rock-button") {
      status[0] = 'block';
  } else if(e.target.id === "paper-button") {
      status[1] = 'block';

  } else if(e.target.id === "scissor-button") {
      status[2] = 'block';

  } else {
    // handle error status
  }

  document.getElementById("rock-user").style.display = status[0];
  document.getElementById("paper-user").style.display = status[1];
  document.getElementById("scissor-user").style.display = status[2];
  

}