"如何在不重新加载页面的情况下重置特定元素？"

Question

目前我正在用 javascript 制作石头、剪纸、剪刀游戏。每次我都必须玩并重新加载页面时，这有点烦人。 因此，我尝试放置一个重置为新游戏的按钮。 但是我遇到了这样的错误： Uncaught TypeError: document.getElementById(...).reset is not a function.我在这里分享我的代码。

Answer 1

我发现了这一点，它可以通过单击元素中的任意位置来重置游戏。 我仍在试图弄清楚如何制作一个按钮来重置它，但还没有弄清楚。

var rps = document.getElementById('rps');
  rps.addEventListener('mouseup', playAgain);
  function playAgain (){
  location.reload();

Answer 2

这是因为.reset()只是HTMLFormElement上的一个方法，你没有在任何地方使用表单元素，所以你不能使用这个方法。 尝试手动重置元素。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

Answer 3

由于所述reset仅适用于表单元素，您可以执行以下操作以重置为初始状态：

function playAgain () {
    const initialState = `
      <img id="rock" src="http://images.clipartpanda.com/rock-clipart-clipart-harvestable-resources-rock.png"
        height="150" width="150" onclick="rpsGame(this)" />
      <img id="paper" src="http://images.clipartpanda.com/paper-clipart-nexxuz-Loose-Leaf-Paper.png" height="150"
        width="150" onclick="rpsGame(this)" />
      <img id="scissors"
        src="https://thumbs.dreamstime.com/b/muestra-femenina-de-la-victoria-de-la-muestra-de-la-mano-o-signo-de-la-paz-o-tijeras-83128345.jpg"
        height="150" width="150" onclick="rpsGame(this)" />`;

    document.getElementById("flex-box-rps-div").innerHTML = initialState;
}