时间戳

首页 > 解决方案 > 如何在不重新加载页面的情况下重置特定元素？

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

问题描述

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

//Challenge 3: Rock, Paper, Scissors

function rpsGame (yourChoice) {
  console.log(yourChoice);
  var humanChoice, botChoice;
  humanChoice = yourChoice.id;

  botChoice = numberToChoice(randToRpsInt());
  console.log('Computer choice:', botChoice);

  results = decideWinner(humanChoice, botChoice);// [0,1] human lost| bot won
  console.log(results)

  message = finalMessage(results); // {message: 'You won!','color: 'green'}
  console.log(message);

  rpsFrontEnd(yourChoice.id, botChoice, message);
  document.getElementById('restart')
}

function randToRpsInt () {
  return Math.floor(Math.random() * 3);
}

function numberToChoice (number) {
  return ["rock", "paper", "scissors"][number];
}

function decideWinner (yourChoice, computerChoice) {
  var rpsDatabase = {
    'rock': { 'scissors': 1, 'rock': 0.5, 'paper': 0 },
    'paper': { 'rock': 1, 'paper': 0.5, 'scissors': 0 },
    'scissors': { 'paper': 1, 'scissors': 0.5, 'rock': 0 }
  }
  var yourScore = rpsDatabase[yourChoice][computerChoice];
  var computerScore = rpsDatabase[computerChoice][yourChoice];
  return [yourScore, computerScore];
}

function finalMessage ([yourScore, computerScore]) {
  if (yourScore === 0) {
    return { 'message': 'You lost!', 'color': 'red' };
  } else if (yourScore === 0.5) {
    return { 'message': 'Match tied!', 'color': 'yellow' };
  } else {
    return { 'message': 'You won!', 'color': 'green' };
  }
}

function rpsFrontEnd (humanImageChoice, botImageChoice, finalMessage) {
  var imagesDataBase = {
    'rock': document.getElementById('rock').src,
    'paper': document.getElementById('paper').src,
    'scissors': document.getElementById('scissors').src
  }
  //let's remove all the images
  document.getElementById('rock').remove()
  document.getElementById('paper').remove()
  document.getElementById('scissors').remove()

  var humanDiv = document.createElement('div');
  var botDiv = document.createElement('div');
  var messageDiv = document.createElement('div');

  humanDiv.innerHTML = "<img src= '" + imagesDataBase[humanImageChoice] + "' height=150 width=150 style='box-shadow: 0px 10px 50px rgba(37,50,223,1);'>"
  messageDiv.innerHTML = "<h1 style ='color:" + finalMessage['color'] + "; font-size: 60px; padding: 30px; '>" + finalMessage['message'] + "</h1>"
  botDiv.innerHTML = "<img src= '" + imagesDataBase[botImageChoice] + "' height=150 width=150 style='box-shadow: 0px 10px 50px rgba(243,38,24,1);'>"

  document.getElementById('flex-box-rps-div').appendChild(humanDiv);
  document.getElementById('flex-box-rps-div').appendChild(messageDiv);
  document.getElementById('flex-box-rps-div').appendChild(botDiv);

}

function playAgain () {
  document.getElementById("flex-box-rps-div").reset();
}
<div class="container-3">
    <h2>Challenge 3: Rock, Paper, Scissors</h2>
    <div class="flex-box-rps">
      <span>
        <button class="btn btn-warning" onclick="playAgain()">Restart Game</button>
      </span>
    </div>

    <div class="flex-box-rps" id="flex-box-rps-div">
      <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)" />
    </div>


  </div>

标签： javascripthtml

解决方案

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

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

推荐阅读