How can I make my js app run using one “on click event” instead of four?

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.

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 num variables change as well.

Sorry for such a rudimentary question, thanks for any advice.

Here is my code below:

$  (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 > 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 < 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();     })    });
.img {     width: 150px;     height: 150px; }  #crystal-main {     width: 650px;     border: 2px solid gray;     padding: 25px;     background: black;     color: whitesmoke; }
<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <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">     <link rel="stylesheet" href="assets/css/style.css">     <title>Crystal Game</title>     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>     <script src="assets/javascript/game.js"></script> </head>  <body>     <h1>Crystals Collector!</h1>     <hr>     <div class="container-fluid">         <div class="container" id="crystal-main">             <div class="row">                 <h2>Target Score: <span id="target-score"></span></h2>             </div>             <div class="row">                 <h2>Total Score: <span id="total-score"></span></h2>             </div>             <div class="row">                 <div class="col-3-md crystal">                     <img src="assets/images/blue.png" alt="blue" class="img" id="blue">                 </div>                 <div class="col-3-md crystal">                     <img src="assets/images/green.png" alt="green" class="img" id="green">                 </div>                 <div class="col-3-md crystal">                     <img src="assets/images/red.png" alt="red" class="img" id="red">                 </div>                 <div class="col-3-md crystal">                     <img src="assets/images/yellow.png" alt="yellow" class="img" id="yellow">                 </div>             </div>             <div class="row">                 <h4>Wins: <span id="wins"></span></h4>             </div>             <div class="row">                 <h4>Losses: <span id="losses"></span></h4>             </div>         </div>     </div>  </body> </html>