Javascript 函数 if 语句

Question

我正在 javascript 上做一个骰子游戏，你可以赌结果是 ODD 还是 EVEN ，当你按下按钮时，骰子就会滚动，它会显示是奇数还是偶数。我唯一的问题是，当您下注为偶数而得到奇数时，它不会记录为输，或者如果您下注为偶数而结果为偶数，则不会记录为赢。总而言之，我不知道为什么它不记录玩家的分数。感谢所有帮助，谢谢，代码也在此处。

var score = 0;
var lose = 0;
document.getElementById("Even").addEventListener("click", Evencheck);

function Evencheck() {
  var d1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var d11 = parseInt(d1);
  var d22 = parseInt(d2);
  var d33 = parseInt(d11 + d22);
  die1.innerHTML = "Dice 1 rolled: " + d1;
  die2.innerHTML = "Dice 2 rolled: " + d2;
  sum.innerHTML = " Total Sum: " + d33;
  if (d33 % 2 == 0 && Even.Clicked) {
    var score = score + 1;
    wins.innerHTML = " Wins : " + score;
    losses.innerHTMl = " Losses : " + lose;
  }
  if (d33 % 2 == 1 && Even.Clicked) {
    var lose = lose + 1;
    wins.innerHTML = " Wins : " + score;
    losses.innerHTMl = " Losses : " + lose;
  }
}
document.getElementById("Odd").addEventListener("click", Oddcheck);

function Oddcheck() {
  var d1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var d11 = parseInt(d1);
  var d22 = parseInt(d2);
  var d33 = parseInt(d11 + d22);
  die1.innerHTML = "Dice 1 rolled: " + d1;
  die2.innerHTML = "Dice 2 rolled: " + d2;
  sum.innerHTML = " Total Sum: " + d33;
  if (d33 % 2 == 0 && Odd.Clicked) {
    var lose = lose + 1;
    wins.innerHTML = " Wins : " + score;
    losses.innerHTMl = " Losses : " + lose;
  }
  if (d33 % 2 == 1 && Odd.Clicked) {
    var score = score + 1;
    wins.innerHTML = " Wins : " + score;
    losses.innerHTMl = " Losses : " + lose;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="defaults.css">
  <title>INTRO</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <h1><img src="dice.png" alt="dice" width="50" height="50"> EVEN ODDS<img src="dice.png" alt="dice" width="50" height="50"> </h1>
  <div id="die1" class="dice"> Dice1 :0</div>
  <div id="die2" class="dice"> Dice2 :0</div>
  <div id="sum" class="dicesum"> Sum :0</div>
  <div id="wins" class="score"> Wins :0</div>
  <div id="losses" class="lose"> Losses :0</div>
  <button class="Even" onclick="Evencheck()">Even</button>
  <button class="Odd" onclick="Oddcheck()">ODD</button>

</body>

</html>

Answer 1

你的代码中有几个错误 -

"Even" & "Odd" 是 classes 而不是 id，所以你不能绑定它 - 用 id 属性替换 class 属性。
您的 if 语句不起作用，因为您将代码分为奇数和偶数，您只需要检查 num 是奇数还是事件，而不是单击了哪个按钮 - 将其从语句中删除。
您的代码无法识别 html 输赢元素 - 所以我通过添加 getelemntbyid 来处理它。
你得分并丢失了全局变量，但你重新声明了它们，所以你没有得到正确的值我从函数中的变量中删除了 var 声明。
最重要的是，我建议您在一个获取参数的函数中执行此操作，而不是在处理每种情况的 2 个函数中执行此操作。

尝试以下 -

<h1><img src="dice.png" alt="dice" width="50" height="50">
    EVEN ODDS<img src="dice.png" alt="dice" width="50" height="50"> <h1><img src="dice.png" alt="dice" width="50" height="50">
    EVEN ODDS<img src="dice.png" alt="dice" width="50" height="50"> </h1>
<div id="die1" class="dice"> Dice1 :0</div>
<div id="die2" class="dice"> Dice2 :0</div>
<div id="sum" class="dicesum"> Sum :0</div>
<div id = "wins" class="score"> Wins :0</div>
<div id = "losses" class="lose"> Losses :0</div>
<button type="button" onclick="clicked(this.name)" name="even">Even</button>
<button type="button" onclick="clicked(this.name)" name="odd">ODD</button>

 <script>
  let score = 0;
  let lose = 0;
  const losses = document.getElementById("losses");
  const wins = document.getElementById("wins");
  function clicked(name){
    var d1 = Math.floor(Math.random() * 6) + 1;
    var d2 = Math.floor(Math.random() * 6) + 1;
    var d11 = parseInt(d1);
    var d22 = parseInt(d2);
    var d33 = parseInt(d11 + d22);
            const result = d33 % 2 == 0 ? 'even' : 'odd';
    die1.innerHTML = "Dice 1 rolled: " + d1;
    die2.innerHTML = "Dice 2 rolled: " + d2;
    sum.innerHTML = " Total Sum: " + d33;
    if( name === result) {
        score++;
      } else {
        lose++
    }
    wins.innerHTML = " Wins : " + score;
    losses.innerHTML = " Losses : " + lose;
  }
</script>

Answer 2

你有一些小的逻辑错误，我建议你利用 JavaScript，你可以有一个 "main" 模块（让称之为 play())，您可以在其中处理游戏的逻辑。

此外，如果您不使用您定义的 DOM 引用，最好删除它们。代码越少越好。（大部分时间）

查看以下更正：

发生了什么变化？：

添加了 "log" div 以便玩家可以看到发生了什么。
删除了未使用的 DOM 引用。
添加了 play() 功能，可以处理游戏中的所有内容。
添加了 rollDice() 功能，可以掷出您想要的骰子数量。

仅此而已，更少的代码，更易于阅读和工作。测试一下：

let won = 0;
let lost = 0;
    
function rollDice(amount=1) { // A module that rolls the amount dices you want
  let dices = [];
  for(let c=0;c<amount;c++) {
    dices.push(+Math.floor(Math.random() * 6) + 1);
  }
  return dices; // Returns it as an array
}

function play(selection) {
  let dices = rollDice(2); // Roll two dices
  let sum = dices[0] + dices[1];
  die1.innerHTML = "Dice 1 rolled: " + dices[0];
  die2.innerHTML = "Dice 2 rolled: " + dices[1];
  res.innerHTML = " Total Sum: " + sum;
  let result = sum % 2 === 0 ? "even" : "odd"; // Ternary if statement to get the result
  log.innerHTML = `
    You selected ${selection} and result is ${result}.
    You ${selection===result ? "won" : "lost"}.
  `;
  if(selection===result) { // If statement that handles score based on result
    won++;
  } else {
    lost++;
  }
  wins.innerHTML = "Wins: " + won; // Update both results on screen after played
  losses.innerHTML = "Losses: " + lost;
}

<img src="dice.png" alt="dice" width="50" height="50">
<h1>EVEN</h1>
<h1>ODDS</h1>
<img src="dice.png" alt="dice" width="50" height="50">
<div id="die1" class="dice"> Dice1 :0</div>
<div id="die2" class="dice"> Dice2 :0</div>
<div id="res" class="dicesum"> Sum :0</div>
<div id="wins" class="score"> Wins :0</div>
<div id="losses" class="lose"> Losses :0</div>
<button class="even" name="even" onclick="play(this.name)">Even</button>
<button class="odd" name="odd" onclick="play(this.name)">ODD</button>
<div id="log"></div>

Answer 3

考虑编写接受输入并产生输出的函数 -

const roll = (sides = 6) =>
  Math.floor(Math.random() * sides) + 1
   
const isWin = (sum, bet) =>
  (sum & 1) === bet

const update = (bet, state) =>
{ const d1 = roll()
  const d2 = roll()
  const sum = d1 + d2

  return Object.assign
    ( state
    , { d1, d2, sum }
    , isWin(sum, bet)
        ? { win: state.win + 1 }
        : { loss: state.loss + 1 }
    )
}

const render = (form, state) =>
  Object
    .entries(state)
    .forEach(([ k, v ]) => form[k].value = v)
 
const play = (form, bet, state) =>
  render
    ( form
    , update(bet, state)
    )

// init
const state =
  { d1: 0, d2: 0, sum: 0, win: 0, loss: 0 }

const f = document.querySelector("form")
f.evenbet.addEventListener("click", event => play(f, 0, state))
f.oddbet.addEventListener("click", event => play(f, 1, state))

render(f, state)

<form>
  Dice: <output name="d1"></output> <output name="d2"></output><br>
  Sum: <output name="sum"></output><br>
  <br>
  Win: <output name="win"></output> &nbsp; 
  Loss: <output name="loss"></output><br>
  Bet:
  <button type="button" name="oddbet">Odd</button>
  <button type="button" name="evenbet">Even</button>
</form>

Javascript 函数 if 语句

Javascript function if statement

html

javascript

function

event-listener

发生了什么变化？：