Javascript 如何创建有效的条件提交框

我是一个有点新手，正在制作一个猜谜游戏，在想如何让我的第二个提交表单工作时遇到了一些麻烦

首先，我随机填充一副卡片，让用户猜有多少张。然后我想让用户猜一下甲板上有多少颗心。我的代码如下所示： HTML:

选一张牌，任何一张牌
您有两盒牌，但您可能没有玩满牌组。你实际上有多少张卡片

Javascript:

// Variable for a guess tally
var guessTally = 1;

// Let's create arrays for card attributes
var suits = ["H", "D", "S", "C"];
var ranks = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"];

// Card class constructor
var Card = function() {
  var randomSuit = Math.floor(Math.random()*suits.length);
  var randomRank = Math.floor(Math.random()*ranks.length);
  var card = {
    suit: suits[randomSuit],
    rank: ranks[randomRank]
  };
  return card;
};

// Now we create a deck object (we'll only need one, so we don't need a constructor here)
var cardDeck = {
  cards: [],
  capacity: 2,
  popDeck: function() {
    var answer = Math.floor(Math.random() * this.capacity + 1);
    while(this.cards.length < answer) {
    this.cards.push(new Card());
    }
  },
  testDeck: function() {
    console.log("Our deck has " + this.cards.length + " cards in it");
  }
};

// Now, let's write a function for the actual guessing game
var game = {
  init: function(){
    $("#game-input").on("submit", function() {
  var message;
      var nextGame = "Now that you've won, guess how many hearts are in the deck:";
      var heartHTML = '<form id="heart-input"><input type="text" id="heartGuess"/><input type="submit" /></form>';
  var tallyMessage = "Total guesses: " + guessTally;
  var guess = $("#guess").val();

// Logic for what to do while guessing
   if (guess == cardDeck.cards.length && guessTally === 1) {
    message = "Good job, you got it! It took you " + guessTally + " guess!";
    $("#heartGame").html(nextGame);
    $("#heart-placeholder").html(heartHTML);

  } else if (guess == cardDeck.cards.length && guessTally > 1) {
    message = "Good job, you got it! It took you " + guessTally + " guesses.";
    $("#heartGame").html(nextGame);
    $("#heart-placeholder").html(heartHTML);

  } else if (guess > cardDeck.cards.length) {
    message = "You guessed " + guess + ". Sorry, your guess was too high, you'll have to try again.";
    guessTally++;

  } else if (guess < cardDeck.cards.length) {
    message = "You guessed " + guess + ". Whoops, looks like you guessed low";
    guessTally++;

  } else if (isNaN(guess)) {
    message = "Please guess using a number.";
  }
  $("#tally").html(tallyMessage);    
  $("#result").html(message);
  return false;
    });
  }
};

//Count for the individual suits
var suitCount = {
  hearts:   0,  
  spades:   0,
  clubs:    0,
  diamonds: 0,
  count:    function(){
    i = 0;
    for (i; i < cardDeck.cards.length; i++) {
      if (cardDeck.cards[i].suit === "H") {
        this.hearts++;
      } else if (cardDeck.cards[i].suit === "S") {
        this.spades++;         
      } else if (cardDeck.cards[i].suit === "C") {
        this.clubs++;
      } else if (cardDeck.cards[i].suit === "D") {
        this.diamonds++;
      }
    }
  }  
};

//Logic for Heart count game
var suitGame = {
  init: function(){
    $("#heart-input").on("submit", function() {
  var heartMessage;
  var heartGuess = $("#heartGuess").val();
  var diff = suitCount.hearts - heartGuess;

 //Logic for guessing heart count
  if (diff < 0) {
    heartMessage = ("Too low");
  } else if (diff > 0) {
    heartMessage = ("Too high");
  } else if (diff === 0) {
    heartMessage = ("Got it");
  }

    $("#heartResult").html(heartMessage);
    return false;
    });
  }
};

cardDeck.popDeck();
suitCount.count();
game.init();
suitGame.init();

//猜测计数的变量
var=1；
//让我们为卡片属性创建数组
风险值=[“H”、“D”、“S”、“C”]；
风险价值排名=[“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“10”、“J”、“Q”、“K”、“A”]；
//卡类构造函数
变量卡=函数（）{
var randomSuit=Math.floor（Math.random（）*suits.length）；
var randomRank=Math.floor（Math.random（）*ranks.length）；
var卡={
西服：西服，
等级：等级[随机等级]
};
回程卡；
};
//现在我们创建一个deck对象（我们只需要一个，所以这里不需要构造函数）
var cardDeck={
卡片：[]，
容量：2，
popDeck:function（）{
var answer=Math.floor（Math.random（）*this.capacity+1）；
while（this.cards.length<答案）{
此.cards.push（新卡（））；
}
},
testDeck:function（）{
console.log（“我们的牌组中有“+this.cards.length+”个牌”）；
}
};
//现在，让我们为实际的猜谜游戏编写一个函数
var博弈={
init:function（）{
$（“#游戏输入”）。在（“提交”，函数（）上{
var消息；
var nextGame=“既然你赢了，猜猜牌堆里有多少颗心：”；
var-heartHTML=''；
var tallyMessage=“总猜测数：”+GuestTall；
var guess=$（“#guess”）.val（）；
//猜测时做什么的逻辑
if（guess==cardDeck.cards.length&&guess==1）{
message=“干得好，你明白了！你花了”+guestally+“guess！”；
$（“#心脏游戏”）.html（nextGame）；
$（“#心脏占位符”）.html（心脏html）；
}else if（guess==cardDeck.cards.length&&guestally>1）{
message=“干得好，你猜对了！你用了”+guestally+guestally。”；
$（“#心脏游戏”）.html（nextGame）；
$（“#心脏占位符”）.html（心脏html）；
}else if（猜测>卡片组.卡片.长度）{
message=“您猜中了“+guess+”。抱歉，您的猜测太高，您必须再试一次。”；
猜数++；
}else if（猜测0）{
heartMessage=（“过高”）；
}否则如果（差异===0）{
heartMessage=（“明白了”）；
}
$（“#heartResult”）.html（heartMessage）；
返回false；
});
}
};
popDeck（）；
count.count（）；
game.init（）；
suitGame.init（）；

---

请原谅我的长篇大论，我只是想说得彻底一点

您似乎在使用===而不是==。我以前没有见过===使用过，并且==表示等于？。=用于设置值，而==检查两个值是否相等，据我所知，===没有任何用处。

在这里让代码执行多次提交没有任何困难：。如果有的话，你会遇到什么样的错误？什么不适合你？您所写的所有内容看起来都是有效的，而且似乎都很好。@gfish3000它看起来确实有效，很抱歉，我不太清楚。在这个JSFIDLE示例中，页面在提交到第二个框时刷新/中断。预期的行为是，它将根据suitGame.init（）的逻辑将结果返回到heartResult，而不会使页面崩溃。我认为这不是问题所在。==用于强制执行左侧是否等于右侧，而==有时会根据比较类型给出一些古怪的行为。有关更多信息，请查看此。

// Variable for a guess tally
var guessTally = 1;

// Let's create arrays for card attributes
var suits = ["H", "D", "S", "C"];
var ranks = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"];

// Card class constructor
var Card = function() {
  var randomSuit = Math.floor(Math.random()*suits.length);
  var randomRank = Math.floor(Math.random()*ranks.length);
  var card = {
    suit: suits[randomSuit],
    rank: ranks[randomRank]
  };
  return card;
};

// Now we create a deck object (we'll only need one, so we don't need a constructor here)
var cardDeck = {
  cards: [],
  capacity: 2,
  popDeck: function() {
    var answer = Math.floor(Math.random() * this.capacity + 1);
    while(this.cards.length < answer) {
    this.cards.push(new Card());
    }
  },
  testDeck: function() {
    console.log("Our deck has " + this.cards.length + " cards in it");
  }
};

// Now, let's write a function for the actual guessing game
var game = {
  init: function(){
    $("#game-input").on("submit", function() {
  var message;
      var nextGame = "Now that you've won, guess how many hearts are in the deck:";
      var heartHTML = '<form id="heart-input"><input type="text" id="heartGuess"/><input type="submit" /></form>';
  var tallyMessage = "Total guesses: " + guessTally;
  var guess = $("#guess").val();

// Logic for what to do while guessing
   if (guess == cardDeck.cards.length && guessTally === 1) {
    message = "Good job, you got it! It took you " + guessTally + " guess!";
    $("#heartGame").html(nextGame);
    $("#heart-placeholder").html(heartHTML);

  } else if (guess == cardDeck.cards.length && guessTally > 1) {
    message = "Good job, you got it! It took you " + guessTally + " guesses.";
    $("#heartGame").html(nextGame);
    $("#heart-placeholder").html(heartHTML);

  } else if (guess > cardDeck.cards.length) {
    message = "You guessed " + guess + ". Sorry, your guess was too high, you'll have to try again.";
    guessTally++;

  } else if (guess < cardDeck.cards.length) {
    message = "You guessed " + guess + ". Whoops, looks like you guessed low";
    guessTally++;

  } else if (isNaN(guess)) {
    message = "Please guess using a number.";
  }
  $("#tally").html(tallyMessage);    
  $("#result").html(message);
  return false;
    });
  }
};

//Count for the individual suits
var suitCount = {
  hearts:   0,  
  spades:   0,
  clubs:    0,
  diamonds: 0,
  count:    function(){
    i = 0;
    for (i; i < cardDeck.cards.length; i++) {
      if (cardDeck.cards[i].suit === "H") {
        this.hearts++;
      } else if (cardDeck.cards[i].suit === "S") {
        this.spades++;         
      } else if (cardDeck.cards[i].suit === "C") {
        this.clubs++;
      } else if (cardDeck.cards[i].suit === "D") {
        this.diamonds++;
      }
    }
  }  
};

//Logic for Heart count game
var suitGame = {
  init: function(){
    $("#heart-input").on("submit", function() {
  var heartMessage;
  var heartGuess = $("#heartGuess").val();
  var diff = suitCount.hearts - heartGuess;

 //Logic for guessing heart count
  if (diff < 0) {
    heartMessage = ("Too low");
  } else if (diff > 0) {
    heartMessage = ("Too high");
  } else if (diff === 0) {
    heartMessage = ("Got it");
  }

    $("#heartResult").html(heartMessage);
    return false;
    });
  }
};

cardDeck.popDeck();
suitCount.count();
game.init();
suitGame.init();