即使我使用parseInt进行加法运算，也能得到一个NaN

Getting a NaN even though im using parseInt for additive equation

本文关键字：NaN 一个 parseInt 运算      更新时间：2023-09-26

我正在为课堂做一个项目，这是一个纸岩剪刀类型的游戏。我的比赛进行得很好，我现在只是想让你打出三局三胜制的比赛。

我把它编码了（至少我试过了），这样当你赢的时候，球员温会得到一分，当你输的时候，康普温就会得到一分。当你们中的一个人得了两分时，你们会得到一个警告，说你们赢了或输了。

我跑遍了整个堆栈，试图找出如何独自完成这项工作，因为这对我来说是新的。我尽了最大努力，但没有成功。我没有得到任何实际的错误，只是没有做我想做的事。我原以为parseInt-'ing变量会使其成为一个数字，但它的形式是NaN，所以显然不是。我做错了什么？

Jsfidle-http://jsfiddle.net/Lwj2zny5/

Html-

<body>
<div id="wrapper">
<h1>Lizard, paper, scissors, spock, rock</h1>
<div id="images">
<img class="game-image" src="Images/lizard.jpg" width="150" height="150" alt="" data-value="1"/>
<img class="game-image" src="Images/paper.jpg" width="150" height="150" alt="" data-value="2"/>
<img class="game-image" src="Images/scissors.jpg" width="150" height="150" alt="" data-value="3"/>
<img class="game-image" src="Images/spock.jpg" width="150" height="150" alt="" data-value="4"/>
<img class="game-image" src="Images/rock.jpg" width="150" height="150" alt="" data-value="5"/>
</div>
<div id="win">
</div>
<div id="score">
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="unit2.js"></script>
</body>

JS-

$(function() {
  $(document).on('click', '.game-image', function(event) {
    var value = $(event.target).data('value');
    var win; 
    var playerwin = parseInt($.trim($(this).html()));
    var compwin = parseInt($.trim($(this).html()));
    var comproll = 1 + Math.floor(Math.random() * 5);
    //$('#comproll').html('Result: '+comproll)
    if (comproll === 1) {
      comp = "Lizard";
    } else if (comproll === 2) {
      comp = "paper";
    } else if (comproll === 3) {
      comp = "scissors";
    } else if (comproll === 4) {
      comp = "Spock";
    } else if (comproll === 5) {
      comp = "Rock";
    }
    if (value === comproll) {
      win = "This ends in a tie, computer chose " + comp + " also.";
    } else if (value === 1) {
      if (comproll === 2 || comproll === 4) {
        win = "You win, comp choose " + comp + ".";
        $(this).html(++playerwin);
      } else if (comproll === 3 || comproll === 5) {
        win = "You lose, comp choose " + comp + ".";
        $(this).html(++compwin);
      }
    } else if (value === 2) {
      if (comproll === 4|| comproll ===  5) {
        win = "You win, comp choose " + comp + ".";
        $(this).html(++playerwin);
      } else if (comproll === 1 ||comproll ===  3) {
        win = "You lose, comp choose " + comp + ".";
        $(this).html(++compwin);
      }
    } else if (value === 3) {
      if (comproll === 1 || comproll ===  2) {
        win = "You win, comp choose " + comp + ".";
        $(this).html(++playerwin);
      } else if (comproll === 4 || comproll ===  5) {
        win = "You lose, comp choose " + comp + ".";
        $(this).html(++compwin);
      }
    } else if (value === 4) {
      if (comproll === 3 || comproll ===  5) {
        win = "You win, comp choose " + comp + ".";
        $(this).html(++playerwin);
      } else if (comproll === 1 || comproll ===  2) {
        win = "You lose, comp choose " + comp + ".";
        $(this).html(++compwin);
      }
    } else if (value === 5) {
      if (comproll === 1 || comproll ===  3) {
        win = "You win, comp choose " + comp + ".";
        $(this).html(++playerwin);
      } else if (comproll === 2 || comproll ===  4) {
        win = "You lose, comp choose " + comp + ".";
        $(this).html(++compwin);
      }
    }
    $('#score').text(playerwin, compwin);
        if (playerwin == 2) {
            alert("You Won");
        } else if (compwin == 2) { 
            alert("You lose");
        }
    $('#win').text(win);
  }); //closes play function
}); // closes function

是的，我知道这是一个庞大的代码，但我们正在学习的是if/else语句，所以这就是我使用的。

提前感谢！

$(document).on('click', '.game-image', function(event) {
   ...
   var playerwin = parseInt($.trim($(this).html()));
   ...

$（this）是指单击的图像。图像不包含.html（）

$(function() {
  var compwin = 0;
  var playerwin = 0;
  $(document).on('click', '.game-image', function(event) {
    var value = $(event.target).data('value');
    var win; 
    var comproll = 1 + Math.floor(Math.random() * 5);

然后

    $("#win").text(win);
    $('#score').text("Player = " + playerwin + ", Computer = " + compwin);
    if (playerwin == 2) {
        alert("You Won");
        compwin = 0;
        playerwin = 0;
        $('#score').text("");
        $("#win").text("");
    } else if (compwin == 2) {
        alert("You lose");
        compwin = 0;
        playerwin = 0;
        $('#score').text("");
        $("#win").text("");
    }

正如其他人所指出的，你是从image html中获得分数，而不是让变量跟踪它。我创建了一个jsfiddle来理解你的代码。但我清理得太多了，看起来有点不一样。

http://jsfiddle.net/sheth/uzagumu7/22/

我创建了一些简短的函数，试图使代码更简洁。

var playerScore = 0;
var computerScore = 0;
var choices = ["Lizard", "Paper", "Scissors", "Spock", "Rock"];
var computerRoll = function () {
    return 1 + Math.floor(Math.random() * 5);
}
var resultOfGame = function (playerChoice, computerChoice) {
    if (playerChoice === computerChoice) {
        return 0; // tie
    } else if (
    ((playerChoice === 1) && ((computerChoice === 2) || (computerChoice === 4))) || 
    ((playerChoice === 2) && ((computerChoice === 4) || (computerChoice === 5))) || 
    ((playerChoice === 3) && ((computerChoice === 1) || (computerChoice === 2))) || 
    ((playerChoice === 4) && ((computerChoice === 3) || (computerChoice === 5))) || 
    ((playerChoice === 5) && ((computerChoice === 1) || (computerChoice === 3)))) 
    { 
        // player wins
        return 1;
    } else {
        return -1;
    }
}

jsfiddle的较新版本具有带usemap的图像。还删除了警报。

http://jsfiddle.net/sheth/uzagumu7/78/

相关文章：