title: How to compare 2 cards in a JavaScript card game
body: <p>I want to create a game with JavaScript that randomly selects 52 random cards (no jokers) and displays the cards one at a time while comparing the cards depending on the card being lower than the last card that was selected.</p>
  
  <p>So, it's a high and low card game.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
      border: 2px solid #f45f;      
  }
  div {
      background:red;    
  }
  #card {
      font-size:40px;
      background:red;
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>var cards = [
  ["&amp;spades;","&amp;clubs;", "&amp;diams;", "&amp;hearts;","&amp;spades;","&amp;clubs;", "&amp;diams;", "&amp;hearts;","&amp;spades;","&amp;clubs;", "&amp;diams;", "&amp;hearts;","&amp;spades;","&amp;clubs;", "&amp;diams;", "&amp;hearts;",
  "&amp;spades;","&amp;clubs;", "&amp;diams;", "&amp;hearts;","&amp;spades;","&amp;clubs;", "&amp;diams;", "&amp;hearts;","&amp;spades;","&amp;clubs;", "&amp;diams;", "&amp;hearts;","&amp;spades;","&amp;clubs;", "&amp;diams;", "&amp;hearts;",
  "&amp;spades;","&amp;clubs;", "&amp;diams;", "&amp;hearts;","&amp;spades;","&amp;clubs;", "&amp;diams;", "&amp;hearts;","&amp;spades;","&amp;clubs;", "&amp;diams;", "&amp;hearts;","&amp;spades;","&amp;clubs;", "&amp;diams;", "&amp;hearts;",
  "&amp;spades;","&amp;clubs;", "&amp;diams;", "&amp;hearts;"],
  [1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,6,6,6,6,7,7,7,7,8,8,8,8,9,9,9,9,10,10,10,10,11,11,11,11,12,12,12,12,13,13,13,13]
  
  ];
  
  var x=0;
  var newCard=[],[];
  function Start(){
      document.getElementById("welcome").innerHTML ="&lt;br&gt;Welcome to the high and low card game ! :)";
  
      document.getElementById("test").style.display = 'block';
      document.getElementById("test2").style.display = 'block';
      document.getElementById("test1").style.display = 'none';    
  }
  
  function highOrLow(answer){
      var answer=answer;
      var rand=Math.floor(Math.random() * 50) + 1;
      document.getElementById("res1").innerHTML =rand;
      document.getElementById("res").innerHTML =x;
      document.getElementById("question").innerHTML = "Is The next card higher or lower ?";
      document.getElementById("name").innerHTML = answer;
  
      document.getElementById("card").innerHTML = cards[1][rand]+cards[0][rand];
  
      if (x &lt; 51) {
          return x++;
      }
      else if (x = 51) {
          document.getElementById("welcome").innerHTML ="";
          document.getElementById("res1").innerHTML ="";
          document.getElementById("res").innerHTML ="";
          document.getElementById("card").innerHTML ="";
          document.getElementById("question").innerHTML = "";
          document.getElementById("test").style.display = 'none';
          document.getElementById("test2").style.display = 'none';
          document.getElementById("test").style.display = 'none';
          document.getElementById("test2").style.display = 'none';
          document.getElementById("test1").style.display = 'block';
          document.getElementById("name").innerHTML = "the game is over";
  
          return x = 0;
      }    
  }   
  
  function clbutton() {
      document.getElementById("test").style.display = 'none';
      document.getElementById("test2").style.display = 'none';    
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body onload="clbutton()"&gt;
      &lt;div id="top"&gt;
          &lt;center&gt;&lt;h1&gt;High Low Card Game&lt;/h1&gt;&lt;/center&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;p&gt;the rules are simple chose if the next card is high or is the card low and try to beat your own score !
      &amp;spades;        
      &amp;clubs;     
      &amp;diams;     
      &amp;hearts;
      &lt;/p&gt;
      &lt;br&gt;    
  
      &lt;button id="test1" type="button"
      onclick="setTimeout( Start(), 1000000 )"&gt;
      Start Game&lt;/button&gt; 
  
      &lt;span id="welcome"&gt;&lt;/span&gt;
      &lt;p id="name"&gt;&lt;/p&gt;
      &lt;p id="res"&gt;&lt;/p&gt;
      &lt;br&gt;
      &lt;p id="res1"&gt;&lt;/p&gt;
      &lt;br&gt;
      &lt;span id="card"&gt;&lt;/span&gt;
  
      &lt;br&gt;
  
      &lt;span id="question"&gt;&lt;/span&gt;
  
      &lt;button id="test" type="button"
      onclick="highOrLow('high')" &gt;
      Higher&lt;/button&gt;
      &lt;br&gt;
      &lt;button id="test2" type="button"
      onclick="highOrLow('low')"&gt;
      Lower&lt;/button&gt;    
  
      &lt;br&gt;
  
      &lt;span id="high"&gt;&lt;/span&gt;
  &lt;/body&gt;
  </code></pre>