即使我使用parseInt作为加性方程式也获得NaN

Question

Im doing a project for class, it's a paper rock scissor type game. 我正在做一个课堂项目，这是一个纸质剪刀式游戏。 I have the game working fine, I'm now simply trying to make it so that you play for a best of three scenario. 我的游戏运行正常，我现在只是想使其变得更好，以便您在三种情况下都能发挥出最佳状态。

I coded it (at least I tried to) so that when you win, playerwin gets a point, and when you lose, compwin gets a point. 我对它进行了编码（至少我尝试过这样编码），以便当您获胜时，playerwin得到一个分，而当您输掉时，compwin得到一个分。 When one of you has two points, you get an alert saying you won or lost. 当你们中的一个人有两分时，您会收到一条警告，说您赢了或输了。

I ran through stack trying to find out how to do this on my own, since this is new to me. 因为这对我来说是新手，所以我遍历了堆栈，试图找出如何自行执行此操作。 Tried my best, came up short. 尽我所能，结果很短。 Im not getting any actual errors, its just not doing what I want. 我没有收到任何实际错误，只是没有按照我想要的去做。 I thought that parseInt-'ing the variable would make it a number, but it's coming up as NaN, so its clearly not. 我以为parseInt-'ing该变量将使它成为一个数字，但它以NaN形式出现，因此显然不是。 What am I doing wrong? 我究竟做错了什么？

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

Html - 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 - 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

Yes i know this is bulky code, but what we're learning atm is if/else statements so thats what im using. 是的，我知道这是庞大的代码，但是我们正在学习的atm是if / else语句，因此我正在使用什么。

Thanks ahead of time! 提前谢谢！

Answer 1

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

$(this) refers to the clicked image. $（this）是指单击的图像。 Images do not contain .html() 图片不包含.html（）

Answer 2

$(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);

then 然后

    $("#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("");
    }

Answer 3

As others have pointed out, you are getting the scores from image html instead of having variables tracking it. 正如其他人指出的那样，您是从image html获得分数的，而不是让变量跟踪它。 I created a jsfiddle trying to understand your code. 我创建了一个jsfiddle试图理解您的代码。 But I cleaned it up too much and looks little bit different. 但是我清理得太多了，看起来有点不同。

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

I created short functions trying to make the code cleaner. 我创建了简短的函数，试图使代码更整洁。

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;
    }
}

Newer version of jsfiddle has image with usemap. 较新版本的jsfiddle具有带usemap的图像。 Also removed the alert. 还删除了警报。

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

即使我使用parseInt作为加性方程式也获得NaN

问题描述

3 个解决方案

解决方案1
4 2014-11-04 18:09:48

解决方案2
1 已采纳 2014-11-04 18:39:20

解决方案3
1 2014-11-04 19:51:08

即使我使用parseInt作为加性方程式也获得NaN

问题描述

3 个解决方案

解决方案1 4 2014-11-04 18:09:48

解决方案2 1 已采纳 2014-11-04 18:39:20

解决方案3 1 2014-11-04 19:51:08

解决方案1
4 2014-11-04 18:09:48

解决方案2
1 已采纳 2014-11-04 18:39:20

解决方案3
1 2014-11-04 19:51:08