Selecting a circle in a map always colors a different one

let img;

let myCircle = []; //Array for Capital coordinates

let pageStatus; //Page Status
let sec_start; //Sekundenzähler

let c;

//-------------------------------------------------------------------------------------------------------

function preload() 
{
  img = loadImage("europe_map.jpg"); //Background Image
}

//-------------------------------------------------------------------------------------------------------

function setup() 
{
  createCanvas(850, 700);
  
  pageStatus = "start"; //Inital page status
  
   
  //Coordinates of the capital
  myCircle[0] = new Circle(173, 157, 8, 0);    //Reykjavik, Island
  myCircle[1] = new Circle(200, 330, 8, 1);    //Dublin, Irland
  myCircle[2] = new Circle(230, 370, 8, 2);    //London, UK
  myCircle[3] = new Circle(350, 270, 8, 3);    //Oslo, Norwegen
  myCircle[4] = new Circle(400, 290, 8, 4);    //Stockholm, Schweden 
  myCircle[5] = new Circle(460, 267, 8, 5);    //Helsinki, Finland
  myCircle[6] = new Circle(550, 305, 8, 6);    //Moskau, Russland
  myCircle[7] = new Circle(460, 285, 8, 7);    //Tallinn, Estland
  myCircle[8] = new Circle(450, 320, 8, 8);    //Riga, Lettland
  myCircle[9] = new Circle(458, 347, 8, 9);    //Vilnius, Litauen
  myCircle[10] = new Circle(482, 355, 8, 10);   //Minsk, Weißrussland
  myCircle[11] = new Circle(510, 400, 8, 11);   //Kiew, Ukraine
  myCircle[12] = new Circle(504, 450, 8, 12);   //Chisinau, Moldavien
  myCircle[13] = new Circle(473, 485, 8, 13);   //Bukarest, Rumänien
  myCircle[14] = new Circle(450, 512, 8, 14);   //Sofia, Bulgarien
  myCircle[15] = new Circle(455, 575, 8, 15);   //Athen, Giechenland
  myCircle[16] = new Circle(415, 530, 8, 16);   //Tirana, Albanien
  myCircle[17] = new Circle(430, 525, 8, 17);   //Skopje, Mazedonien
  myCircle[18] = new Circle(429, 515, 8, 18);   //Pristina, Kosovo
  myCircle[19] = new Circle(408, 525, 8, 19);   //Podgorica, Montenegro
  myCircle[20] = new Circle(420, 485, 8, 20);   //Belgrad, Serbien
  myCircle[21] = new Circle(400, 500, 8, 21);   //Sarajevo, Bosnien Herzegowina
  myCircle[22] = new Circle(380, 475, 8, 22);   //Zagreb, Kroatien
  myCircle[23] = new Circle(400, 452, 8, 23);   //Budapest, Ungarn
  myCircle[24] = new Circle(361, 468, 8, 24);   //Lubjana,Slovenien
  myCircle[25] = new Circle(389, 435, 8, 25);   //Bratislava, Slowakei
  myCircle[26] = new Circle(420, 380, 8, 26);   //Warschau, Polen
  myCircle[27] = new Circle(360, 415, 8, 27);   //Prag, Tschechien
  myCircle[28] = new Circle(380, 440, 8, 28);   //Wien, Österreich
  myCircle[29] = new Circle(357, 380, 8, 29);   //Berlin, Deutschland
  myCircle[30] = new Circle(355, 335, 8, 30);   //Kopenhagen, Dänemark
  myCircle[31] = new Circle(285, 375, 8, 31);   //Amsterdam, Niederlande
  myCircle[32] = new Circle(273, 391, 8, 32);   //Brüssel, Belgien
  myCircle[33] = new Circle(287, 410, 8, 33);   //Luxemburg, Luxemburg
  myCircle[34] = new Circle(316, 447, 8, 34);   //Vaduz, Liechtenstein
  myCircle[35] = new Circle(295, 450, 8, 35);   //Bern, Schweiz
  myCircle[36] = new Circle(338, 525, 8, 36);   //Rom, Italien
  myCircle[37] = new Circle(280, 493, 8, 37);   //Monaco, Monaco
  myCircle[38] = new Circle(250, 420, 8, 38);   //Paris, Frankreich
  myCircle[39] = new Circle(228, 495, 8, 39);   //Andorra, Andorra la Vella
  myCircle[40] = new Circle(160, 505, 8, 40);   //Madrid, Spanien
  myCircle[41] = new Circle(100, 510, 8, 41);   //Lissabon, Portugal
  
  //console.log(myCircle.length);

}

//-------------------------------------------------------------------------------------------------------

function draw() 
{
  
  switch(pageStatus)
  {
    case "start": //Content for Start
    background(248, 231, 214);
   
    textSize(50);
    fill(117, 47, 50);
    text("guess the capital", 220, 350);
    textSize(50);
    fill(117, 47, 50);
    text("city of europe", 260, 400);
    
    textSize(20);
    fill(117, 47, 50);
    text("click to play", 350, 450);
    
    textSize(20);
    fill(117, 47, 50);
    text("thank you for", 30, 40);
    textSize(20);
    fill(117, 47, 50);
    text("joining us today :)", 30, 65);
    
    textSize(20);
    fill(117, 47, 50);
    text("let's learn something!", 630, 40);
    break;
    
    
    case "content": //Content of the game
    
    image(img, 0, 0, width, img.height*width/img.width); //Background
 

    //Display of capitals
    for( let i = 0; i < myCircle.length; i++)
    {
     myCircle[i].display();
     myCircle[i].collide();
    }
  break;
}

}

//-------------------------------------------------------------------------------------------------------


function mousePressed()
{
  //check page status
  switch(pageStatus)
  {
  case "start":
  pageStatus = "content";
  break;
  }
  
}

//-------------------------------------------------------------------------------------------------------

class Circle   //Class for city circles
{
  constructor(x, y, r, id)
  {
    this.x = x;
    this.y = y;
    this.r = 8;
    this.d = id;
  }
  
  display()
  {
    //fill(255, 204, 0);
    c = color('magenta');
    //noStroke();
    stroke(255, 255, 255);   
    strokeWeight(1);
    ellipse(this.x, this.y, this.r);
  }
  
   collide()
  {
    let distance = dist(this.x, this.y, mouseX, mouseY);
  
    if (distance < this.r/2) //this doesn't work right, the wrong point show up in magenta and not the one the mouse hits
    {
      fill(c);
      console.log(this);
      //if(rand= this.id); ???????????????? here apparently is where the randomizer is supposed to go, need to define rand
    }

    else
    {
      fill(200);
    }
  }

}