title: How can I make this js app run using one "on click event" instead of four?
body: <p>I'm a few weeks into javascript and had to make a simple "crystals collector" app. The app works as intended, but the code is obtuse and repetitive. </p>
  
  <p>I'd like to make the app work using just one on click event, rather than using four for each crystal. I can't make an array of each color crystal and loop through them since the <code>num</code> variables change as well. </p>
  
  <p>Sorry for such a rudimentary question, thanks for any advice. </p>
  
  <p>Here is my code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
  
      // Global variables
      
      var targetNumber;
      var num1;
      var num2;
      var num3;
      var num4;
      var userTotal = 0;
      var wins = 0;
      var losses = 0
  
      // Functions
  
      function reset() {
          num1 = Math.floor(Math.random() * 11 + 1);
          num2 = Math.floor(Math.random() * 11 + 1);
          num3 = Math.floor(Math.random() * 11 + 1);
          num4 = Math.floor(Math.random() * 11 + 1);
          targetNumber = Math.floor(Math.random() * 101 + 19);
          userTotal = 0;
          $("#total-score").text(userTotal);
          $("#target-score").text(targetNumber);
      }
  
      function initialize() {
          num1 = Math.floor(Math.random() * 11 + 1);
          num2 = Math.floor(Math.random() * 11 + 1);
          num3 = Math.floor(Math.random() * 11 + 1);
          num4 = Math.floor(Math.random() * 11 + 1);
          targetNumber = Math.floor(Math.random() * 101 + 19);
          $("#target-score").text(targetNumber);
          $("#wins").text(wins);
          $("#losses").text(losses);
          $("#total-score").text(userTotal);
      }
      function logic() {
          if (userTotal === targetNumber) {
              alert("You Win!");
              reset();
              wins++;
              $("#wins").text(wins);
          }
          else if (userTotal &gt; targetNumber) {
              alert("You lose!");
              reset();
              losses++;
              $("#losses").text(losses);
          }
      }
  
      // Run Game (main)
      // something like...
      // var array = ["#blue","#green","#red","#yellow"]
      // for (var i =0; i &lt; array.length;i++) {
      // }
  
      initialize();
  
      $("#blue").on("click", function () {
          userTotal = userTotal + num1;
          $("#total-score").text(userTotal);
          console.log(userTotal);
          logic();
      })
  
      $("#green").on("click", function () {
          userTotal = userTotal + num2;
          $("#total-score").text(userTotal);
          console.log(userTotal);
          logic();
      })
  
      $("#red").on("click", function () {
          userTotal = userTotal + num3;
          $("#total-score").text(userTotal);
          console.log(userTotal);
          logic();
      })
  
      $("#yellow").on("click", function () {
          userTotal = userTotal + num4;
          $("#total-score").text(userTotal);
          console.log(userTotal);
          logic();
      })
  
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.img {
      width: 150px;
      height: 150px;
  }
  
  #crystal-main {
      width: 650px;
      border: 2px solid gray;
      padding: 25px;
      background: black;
      color: whitesmoke;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="assets/css/style.css"&gt;
      &lt;title&gt;Crystal Game&lt;/title&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/javascript/game.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;Crystals Collector!&lt;/h1&gt;
      &lt;hr&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="container" id="crystal-main"&gt;
              &lt;div class="row"&gt;
                  &lt;h2&gt;Target Score: &lt;span id="target-score"&gt;&lt;/span&gt;&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;h2&gt;Total Score: &lt;span id="total-score"&gt;&lt;/span&gt;&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-3-md crystal"&gt;
                      &lt;img src="assets/images/blue.png" alt="blue" class="img" id="blue"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-3-md crystal"&gt;
                      &lt;img src="assets/images/green.png" alt="green" class="img" id="green"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-3-md crystal"&gt;
                      &lt;img src="assets/images/red.png" alt="red" class="img" id="red"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-3-md crystal"&gt;
                      &lt;img src="assets/images/yellow.png" alt="yellow" class="img" id="yellow"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;h4&gt;Wins: &lt;span id="wins"&gt;&lt;/span&gt;&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;h4&gt;Losses: &lt;span id="losses"&gt;&lt;/span&gt;&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>