Question

我是一位JavaScript初学者，试图编写一个简单的Rock，Paper，剪刀游戏。我可以单独使用JS（例如，使用提示功能输入用户输入）来使其工作，但是一旦替换掉HTML，就无法使其持久化。在返回初始HTML值之前，我只是看到答案的闪烁。

index.html

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>RPS - HTML</title>
    </head>

    <body>
        <h3>Which would you like to play?</h3>
        <form>
            <input type="radio" name="choice" value="2"> Scissors<br>
            <input type="radio" name="choice" value="1">
            Paper<br>
            <input type="radio" name="choice" value="0">    Rock<br>
            <input type="submit" onclick="chooseGesture()">
        </form>

        <p id="userOutput">Line 1</p>
        <p id="computerOutput">Line 2</p>
        <p id="result">Line 3</p>

    <link rel="stylesheet" href="rps_html.css">
    <script src="rps_html.js"></script>
    </body>
</html>

rps_html.js

var options = ["rock", "paper", "scissors"];
var userChoice;

function chooseGesture()
    {
    var radios = document.getElementsByName('choice');

    for (var i = 0; i < radios.length; i++) 
        {
        if (radios[i].checked) 
            {
            userChoice = radios[i].value;
            }
        } 

    document.getElementById("userOutput").innerHTML = 
        "You chose " + options[userChoice] + ".<br>";

    var computerChoice = Math.floor(Math.random() * 3);

    document.getElementById("computerOutput").innerHTML = 
        " The computer chose " + options[computerChoice] + ".<br>";

    if ((userChoice == 1 && computerChoice == 2) ||
        (userChoice == 2 && computerChoice == 0) ||
        (userChoice == 3 && computerChoice == 1))
            {
            document.getElementById("result").innerHTML =
                "  You won!";
            }
    else if ((userChoice == 1 && computerChoice == 1) ||
        (userChoice == 2 && computerChoice == 2) ||
        (userChoice == 3 && computerChoice == 0))
            {
            document.getElementById("result").innerHTML =
                "  You lose!";
            }
    else
            {
            document.getElementById("result").innerHTML = 
                "  It is a tie!";
            }
    }

为什么DOM会变回来？

Answer 1

您正在使用<form>。提交<form>（您有<input type="submit" onclick="chooseGesture()">）后，默认情况下将替换页面。可以将输入更改为type不是 submit的输入，这样，在单击表单时，表单甚至不会尝试首先提交：

<input type="button" value="submit" onclick="chooseGesture()">

var options = ["rock", "paper", "scissors"];
var userChoice;

function chooseGesture() {
  var radios = document.getElementsByName('choice');

  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      userChoice = radios[i].value;
    }
  }

  document.getElementById("userOutput").innerHTML =
    "You chose " + options[userChoice] + ".<br>";

  var computerChoice = Math.floor(Math.random() * 3);

  document.getElementById("computerOutput").innerHTML =
    " The computer chose " + options[computerChoice] + ".<br>";

  if ((userChoice == 1 && computerChoice == 2) ||
    (userChoice == 2 && computerChoice == 0) ||
    (userChoice == 3 && computerChoice == 1)) {
    document.getElementById("result").innerHTML =
      "  You won!";
  } else if ((userChoice == 1 && computerChoice == 1) ||
    (userChoice == 2 && computerChoice == 2) ||
    (userChoice == 3 && computerChoice == 0)) {
    document.getElementById("result").innerHTML =
      "  You lose!";
  } else {
    document.getElementById("result").innerHTML =
      "  It is a tie!";
  }
}

<h3>Which would you like to play?</h3>
<form>
  <input type="radio" name="choice" value="2"> Scissors<br>
  <input type="radio" name="choice" value="1"> Paper
  <br>
  <input type="radio" name="choice" value="0"> Rock<br>
  <input type="button" value="submit" onclick="chooseGesture()">
</form>

<p id="userOutput">Line 1</p>
<p id="computerOutput">Line 2</p>
<p id="result">Line 3</p>

或拦截该事件并对其调用.preventDefault()

function chooseGesture(e) {
  e.preventDefault();

var options = ["rock", "paper", "scissors"];
var userChoice;

document.querySelector('input[type="submit"]').addEventListener('click', chooseGesture);

function chooseGesture(e) {
  e.preventDefault();
  var radios = document.getElementsByName('choice');

  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      userChoice = radios[i].value;
    }
  }

  document.getElementById("userOutput").innerHTML =
    "You chose " + options[userChoice] + ".<br>";

  var computerChoice = Math.floor(Math.random() * 3);

  document.getElementById("computerOutput").innerHTML =
    " The computer chose " + options[computerChoice] + ".<br>";

  if ((userChoice == 1 && computerChoice == 2) ||
    (userChoice == 2 && computerChoice == 0) ||
    (userChoice == 3 && computerChoice == 1)) {
    document.getElementById("result").innerHTML =
      "  You won!";
  } else if ((userChoice == 1 && computerChoice == 1) ||
    (userChoice == 2 && computerChoice == 2) ||
    (userChoice == 3 && computerChoice == 0)) {
    document.getElementById("result").innerHTML =
      "  You lose!";
  } else {
    document.getElementById("result").innerHTML =
      "  It is a tie!";
  }
}

<h3>Which would you like to play?</h3>
<form>
  <input type="radio" name="choice" value="2"> Scissors<br>
  <input type="radio" name="choice" value="1"> Paper
  <br>
  <input type="radio" name="choice" value="0"> Rock<br>
  <input type="submit">
</form>

<p id="userOutput">Line 1</p>
<p id="computerOutput">Line 2</p>
<p id="result">Line 3</p>

您还需要修正赢/输逻辑，以便在单击按钮时确定适当的赢家和输家：您的原始代码可以通过

固定

if ((userChoice == 0 && computerChoice == 2) ||
  (userChoice == 1 && computerChoice == 0) ||
  (userChoice == 2 && computerChoice == 1)) {
  document.getElementById("result").innerHTML =
    "  You won!";
} else if ((userChoice == 2 && computerChoice == 0) ||
  (userChoice == 0 && computerChoice == 1) ||
  (userChoice == 1 && computerChoice == 2)) {
  document.getElementById("result").innerHTML =
    "  You lose!";
}

但使用起来会更轻松，更优雅：

const result = document.getElementById("result");
if ((computerChoice + 1) % 3 === userChoice) result.textContent = 'You won!';
else if ((userChoice + 1) % 3 === computerChoice) result.textContent = 'You lose!';
else result.textContent = "  It is a tie!";

var options = ["rock", "paper", "scissors"];
var userChoice;

document.querySelector('input[type="submit"]').addEventListener('click', chooseGesture);

function chooseGesture(e) {
  e.preventDefault();
  var radios = document.getElementsByName('choice');

  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      userChoice = Number(radios[i].value);
    }
  }

  document.getElementById("userOutput").innerHTML =
    "You chose " + options[userChoice] + ".<br>";

  var computerChoice = Math.floor(Math.random() * 3);

  document.getElementById("computerOutput").innerHTML =
    " The computer chose " + options[computerChoice] + ".<br>";

  const result = document.getElementById("result");
  if ((computerChoice + 1) % 3 === userChoice) result.textContent = 'You won!';
  else if ((userChoice + 1) % 3 === computerChoice) result.textContent = 'You lose!';
  else result.textContent = "  It is a tie!";
}

<h3>Which would you like to play?</h3>
<form>
  <input type="radio" name="choice" value="2"> Scissors<br>
  <input type="radio" name="choice" value="1"> Paper
  <br>
  <input type="radio" name="choice" value="0"> Rock<br>
  <input type="submit">
</form>

<p id="userOutput">Line 1</p>
<p id="computerOutput">Line 2</p>
<p id="result">Line 3</p>

替换的HTML不会在DOM中持续存在

1 个答案: