jQuery addClass example

Change class name on click in jQuery

by Eugen Sunic

HTML

<div class="container">
  <div class="harta" id="harta">
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/Rom%C3%A2nia_Jude%C5%A3e.jpg" width="800" height="571" alt="Planets" id="map" usemap="#romap">
  </div>
  <map name="romap" id="romap">

    <area target="" onclick="checkAnswer(this.value='ar')" alt="ar" href="#" coords="136,215,143,214,149,211,156,210,168,212,180,216,191,225,201,233,212,244,228,241,224,256,209,262,205,275,197,288,182,292,168,286,151,286,138,279,124,281,105,277,88,269,73,262,80,250,92,248,103,252,115,244,121,233,124,220,129,215" shape="poly">
    <area target="" onclick="checkAnswer(this.value='tm')" alt="tm" href="#" coords="47,266,53,262,58,265,63,258,72,265,87,272,94,274,105,280,113,284,125,284,134,282,146,285,149,294,159,290,170,289,178,291,187,295,196,293,207,291,205,300,211,303,214,310,208,316,199,321,191,328,182,329,175,336,161,334,148,328,139,331,134,339,130,348,134,357,138,363,132,371,111,362,107,354,95,354,90,343,80,336,84,330,81,320,83,308,73,307,71,297,62,288,54,281,49,273" shape="poly">
    <area target="" onclick="checkAnswer(this.value='cs')" alt="cs" href="#" coords="134,373,139,362,134,349,136,338,143,331,151,332,159,335,168,338,178,339,186,330,196,329,207,323,218,334,225,340,223,349,225,359,223,366,224,378,230,380,217,389,211,400,207,411,200,416,189,416,182,423,181,432,171,438,160,430,145,429,137,422,127,415,124,403,135,400,119,391,132,382" shape="poly">
    <area target="" onclick="checkAnswer(this.value='mh')" alt="mh" href="#" coords="172,436,181,438,183,427,188,418,196,417,205,416,209,406,215,394,222,387,232,382,236,393,239,402,243,413,245,421,251,425,257,432,264,430,272,433,279,438,284,445,270,447,264,456,265,465,256,471,254,478,256,484,247,488,243,493,232,486,223,478,224,470,214,469,208,459,211,450,219,445,226,447,233,445,226,438,209,424,200,426,192,433,186,442,179,450" shape="poly">
    <area target="" onclick="checkAnswer(this.value='dj')" alt="dj" href="#"...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$('#map').mapster({
   fillColor: '0000',
   fillOpacity: 0.3
 });


 let judete = ["ar", "tm", "cs", "mh", "dj", "ot", "tr", "gr", "cl", "ct", "tl", "il", "if", "ph", "db", "ag", "vl", "hd", "ab", "gj", "bh", "cj", "sj", "sm", "mm", "bn", "ms", "sb", "bv", "bz", "br", "gl", "vn", "cv", "hr", "sv", "bt", "nt", "is", "bc", "vs"];

 shuffle(judete);


 function shuffle(array) {
   for (let i = array.length - 1; i > 0; i--) {
     let j = Math.floor(Math.random() * (i + 1));
     [array[i], array[j]] = [array[j], array[i]];
   }
 }
 let judet = judete.pop();


 console.log("start> " + judet);

 function checkAnswer(val) {

   console.log("ras= " + val);


   if (val == judet) {
     console.log("corect");

     shuffle(judete);
     judet = judete.pop();

     console.log("inrebare= " + judet);

   } else {
     console.log("gresit");



   }


 }