Question

我不知道我这样做是否正确，但是我试图在脚本循环之后显示表格中的总数我已经在这个网站上搜索了几天但是没有任何东西运气。这是我的代码： HTML：

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="script.js" type=J AVASCRIPT></script>
</head>

<body>
  Number of simulations:
  <input type="textbox" id="loops">
  <br>
  <br>
  <input type="button" value="Play" id="play" onClick="simulate()">
  <br>
  <br>
  <table border="Thick">
    <tr>
      <td></td>
      <td>Wins</td>
      <td>Percentage</td>
    </tr>
    <tr>
      <td>Player</td>
      <td>
        <div id="playWins" value="test"></div>
      </td>
      <td>
        <div id="playPercent"></div>
      </td>
    </tr>
    <tr>
      <td>Computer</td>
      <td>
        <div id="comWins"></div>
        <td>
          <div id="comPercent"></div>
        </td>
    </tr>
    <tr>
      <td>Ties</td>
      <td>
        <div id="ties"></div>
      </td>
      <td>
        <div id="tiesPercent"></div>
      </td>
    </tr>
  </table>
</body>

</html>

＆＃13;

使用Javascript：

＆＃13;

    function simulate() {
      var userSelect;
      var comSelect;
      var ties = 0;
      var playWins = 0;
      var comWins = 0;
      var loops;
      var counter = 0;
      loops = document.getElementById("loops").innerHTML;

      while (loops > counter) {
        userSelect = new Math.random();
        if (userSelect < 0.34) {
          userSelect = "rock";
        } else if (userSelect <= 0.67) {
          userSelect = "paper";
        } else {
          userSelect = "scissors";
        }

        comSelect = new Math.random();
        if (comSelect < 0.34) {
          comSelect = "rock";
        } else if (comSelect <= 0.67) {
          comSelect = "paper";
        } else {
          comSelect = "scissors";
        }

        if (userSelect == comSelect) {
          ties = ties + 1;
        } else if (((userSelect = "rock") && (comSelect = "scissors")) || ((userSelect = "paper") && (comSelect = "rock")) || ((userSelect = "scissors") && (comSelect = "paper"))) {
          playWins = playWins + 1;
        } else {
          comWins = comWins + 1;
        }
        counter++;
      }


      //Displaying information in table -- will not work
      document.getElementById("playWins").value = ((playWins).toString());
      document.getElementById("comWins").value = (comWins).toString();
      document.getElementById("ties").value = (ties).toString();
    }

＆＃13;

Answer 1

我在获取循环值时看到错误。试试这个

loops = document.getElementById("loops").value;

根据我的评论更新：

考虑以下变化

userSelect = Math.random(); 
.
.
.
comSelect = Math.random();

还将内容值更新为：

document.getElementById("playWins").innerHTML = ...;

Answer 2

改为使用

document.getElementById("playWins").value

尝试：

document.getElementById("playWins").textContent

有关如何在div中写入的更多详细信息，请参阅MDN（不要使用innerHTML）。

要将文字转换为数字，您可以使用：

+document.getElementById("loops").value.trim()

最好的方法，只是为了避免从文本转换为数字，将输入框定义为数字是：

<input type="number" id="loops">

解决方案可以是：

＆＃13;

function simulate() {
  var userSelect;
  var comSelect;
  var ties = 0;
  var playWins = 0;
  var comWins = 0;
  var loops;
  var counter = 0;
  loops = +document.getElementById("loops").value.trim();

  while (loops > counter) {
    userSelect = Math.random();
    if (userSelect < 0.34) {
      userSelect = "rock";
    } else if (userSelect <= 0.67) {
      userSelect = "paper";
    } else {
      userSelect = "scissors";
    }

    comSelect = Math.random();
    if (comSelect < 0.34) {
      comSelect = "rock";
    } else if (comSelect <= 0.67) {
      comSelect = "paper";
    } else {
      comSelect = "scissors";
    }

    if (userSelect == comSelect) {
      ties = ties + 1;
    }
    else if (((userSelect = "rock") && (comSelect = "scissors")) || ((userSelect = "paper") && (comSelect = "rock")) || ((userSelect = "scissors") && (comSelect = "paper"))) {
      playWins = playWins + 1;
    }
    else {
      comWins = comWins + 1;
    }
    counter++;
  }
  //Displaying information in table -- will not work
  document.getElementById("playWins").textContent = playWins.toString();
  document.getElementById("comWins").textContent = comWins.toString();
  document.getElementById("ties").textContent = ties.toString();
}

＆＃13;

Number of simulations: <input type="textbox" id="loops"><br><br>
<input type="button" value="Play" id="play" onClick="simulate()"><br><br>
<table border="Thick">
    <tr>
        <td></td>
        <td>Wins</td>
        <td>Percentage</td>
    </tr>
    <tr>
        <td>Player</td>
        <td>
            <div id="playWins" value="test"></div>
        </td>
        <td>
            <div id="playPercent"></div>
        </td>
    </tr>
    <tr>
        <td>Computer</td>
        <td>
            <div id="comWins"></div>
        <td>
            <div id="comPercent"></div>
        </td>
    </tr>
    <tr>
        <td>Ties</td>
        <td>
            <div id="ties"></div>
        </td>
        <td>
            <div id="tiesPercent"></div>
        </td>
    </tr>
</table>

＆＃13;

Answer 3

相反，你可以试试这个： document.getElementById（“playWins”）。innerHTML =“你的价值”;

在div元素中显示信息

3 个答案: