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

Question

我正在做一个课堂项目，这是一个纸质剪刀式游戏。 我的游戏运行正常，我现在只是想使其变得更好，以便您在三种情况下都能发挥出最佳状态。

我对它进行了编码（至少我尝试过这样编码），以便当您获胜时，playerwin得到一个分，而当您输掉时，compwin得到一个分。 当你们中的一个人有两分时，您会收到一条警告，说您赢了或输了。

因为这对我来说是新手，所以我遍历了堆栈，试图找出如何自行执行此操作。 尽我所能，结果很短。 我没有收到任何实际错误，只是没有按照我想要的去做。 我以为parseInt-'ing该变量将使它成为一个数字，但它以NaN形式出现，因此显然不是。 我究竟做错了什么？

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

是的，我知道这是庞大的代码，但是我们正在学习的atm是if / else语句，因此我正在使用什么。

提前谢谢！

Answer 1

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

$（this）是指单击的图像。 图片不包含.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);

然后

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

正如其他人指出的那样，您是从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/

即使我使用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