如果在Java脚本中制作骰子游戏时else不起作用

问题描述 投票：0回答：1

我正在我的 Udemy 课程上使用 JavaScript 进行骰子游戏挑战。 到目前为止，一切都工作正常，每次重新加载时，我都将骰子设为随机。 我现在正在尝试将“h1”更改为“平局！”、“玩家 1 获胜！”和“玩家 2 获胜！”使用 

if else
语句。 但由于某种原因，
if else
不会响应。我的代码： HTML：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dicee</title>
    <link rel="stylesheet" href="C:\Users\natan\Desktop\Web Development udemy\JavaScript\Dicee Challenge\styles.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">
  </head>
  <body>

    <div class="container">
      <h1 class ="h1">Refresh Me</h1>

      <div class="dice">
      <p>Player 1</p>
<img class="img1" src="C:\Users\natan\Desktop\Web Development udemy\JavaScript\Dicee Challenge\images\dice6.png" alt="dice6">
      </div>

      <div class="dice">
        <p>Player 2</p>
<img class="img2" src="C:\Users\natan\Desktop\Web Development udemy\JavaScript\Dicee Challenge\images\dice6.png" alt="dice6">
    </div>

    </div>



<script src="./js/index.js" charset="utf-8"></script>
  </body>

  <footer>
    www 🎲 App Brewery 🎲 com
  </footer>
</html>

JavaScript：

function randomDice() {

  const randomNum1 = Math.floor(Math.random() * 6 + 1);
  const randomNum2 = Math.floor(Math.random() * 6 + 1);

  const img1Random = document.querySelector(".img1");
  img1Random.setAttribute("src", "./images/dice" + randomNum1 + ".png");

  const img2Random = document.querySelector(".img2");
  img2Random.setAttribute("src", "./images/dice" + randomNum2 + ".png");

  let doch1 = document.querySelector("h1").innerHTML

  if (randomNum1 === randomNum2) {
    doch1 = "DRAW!"
  } else if (randomNum1 > randomNum2) {
    doch1 = "PLAYER 1 WINS!"
  } else {
    doch1 = "PLAYER 2 WINS!"
  }
}

randomDice()
javascript html function if-statement dice
1个回答
0
投票

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dicee</title>
    <link rel="stylesheet" href="C:\Users\natan\Desktop\Web Development udemy\JavaScript\Dicee Challenge\styles.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1 class ="h1">Refresh Me</h1>
      <div class="dice">
      <p>Player 1</p>
      <img class="img1" src="C:\Users\natan\Desktop\Web Development udemy\JavaScript\Dicee Challenge\images\dice6.png" alt="dice6">
      <p id="Player1Roll"></p>
      </div>
      <div class="dice">
        <p>Player 2</p>
        <img class="img2" src="C:\Users\natan\Desktop\Web Development udemy\JavaScript\Dicee Challenge\images\dice6.png" alt="dice6">
        <p id="Player2Roll"></p>
<p id="results"></p>
    </div>
    </div>
<script>
  function randomDice() {
  const randomNum1 = Math.floor(Math.random() * 6 + 1);
  const randomNum2 = Math.floor(Math.random() * 6 + 1);
document.getElementById("Player1Roll").innerHTML = 'Player one rolled ' + randomNum1 + '!'
document.getElementById("Player2Roll").innerHTML = 'Player one rolled ' + randomNum2 + '!'
  if (randomNum1 === randomNum2) {
    document.getElementById("results").innerHTML = "DRAW!"
  } else if (randomNum1 > randomNum2) {
    document.getElementById("results").innerHTML = "PLAYER 1 WINS!"
  } else {
    document.getElementById("results").innerHTML = "PLAYER 2 WINS!"
  }
}
randomDice()
</script>
<h3 id="results"></h3>
  </body>

  <footer>
    www 🎲 App Brewery 🎲 com
  </footer>
</html>

您可能已经以一种更简单的方式解决了这个问题，但以防万一，这是我想出的答案。 :)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.