in this javascript for leaflet.js why are the firstCircleMarker and secondCircleMarker not having their radius changed to 8 when the cafeOneButton and cafeTwoButton is pressed - 'var money = 100000;
var numberOfCarriages = 1;
var speed = 60;
var dailybonus = 0;

const map = L.map("map").setView([54.2231637, -1.9381623], 6);
// Add custom zoom control to the map with position set to ‘topright’
const customZoomControl = L.control.zoom({ position: "topright" }).addTo(map);

// Remove the default zoom control from the map
map.removeControl(map.zoomControl);

let clickedPoints = [];
let isLineDrawn = false;
let marker; // Declare the marker variable
let progress = 0;
let cafeOneBonus = 0;
let cafeTwoBonus = 0;
let hotelOneBonus = 0;
let hotelTwoBonus = 0;
let circleMarkers = [];

let firstCircleMarker;
let secondCircleMarker;

const increaseSpeed = () => {
 const speedIncrease = 20;
 speed += speedIncrease;
};
// Function to create circle markers with click functionality
function createCircleMarkers(geojson) {
 return L.geoJSON(geojson, {
  pointToLayer: function (feature, latlng) {
   const circleMarker = L.circleMarker(latlng, {
    radius: 4,
    fillColor: "#ff7800",
    color: "#000",
    weight: 0.2,
    opacity: 1,
    fillOpacity: 0.8,
   });

   // Push the circle marker to the array
   circleMarkers.push(circleMarker);

   // Attach the feature to the circle marker
   circleMarker.feature = feature;

   circleMarker.on("mouseover", function () {
    this.bindPopup(feature.properties.city).openPopup();
   });

   circleMarker.on("click", function (e) {
    if (!isLineDrawn) {
     clickedPoints.push(e.target); // Push the circle marker with attached feature

     if (clickedPoints.length === 2) {
      const firstCityCoords =
       clickedPoints[0].feature.geometry.coordinates;
      const secondCityCoords =
       clickedPoints[1].feature.geometry.coordinates;

      // Update the global markers
      firstCircleMarker = circleMarkers[0];
      secondCircleMarker = circleMarkers[1];

      const polyline = L.polyline(
       clickedPoints.map((p) => p.getLatLng())
      ).addTo(map);

      const firstCity = clickedPoints[0].feature.properties.city;
      const secondCity = clickedPoints[1].feature.properties.city;

      clickedPoints = [];
      isLineDrawn = true;

      // Remove click event listener after a line has been drawn
      map.off("click");
      // Set the map bounds to show the area with the polyline
      map.fitBounds(polyline.getBounds());
      money = money - 50000; // Subtract 50000 from money
      const moneyDisplay = document.getElementById("moneydisplay");
      const moneyString = `£${money}`; // Assuming money is a number
      moneyDisplay.textContent = moneyString;

      const instructionsElement = document.getElementById("instructions");

      // Clear any existing content in the instructions element:
      instructionsElement.innerHTML = "";

      // Create separate paragraph elements:
      const congratulationsParagraph = document.createElement("p");
      congratulationsParagraph.textContent = `Congratulations you have built your first train line from ${firstCity} to ${secondCity}!`;

      const costsParagraph = document.createElement("p");
      costsParagraph.textContent = `Your construction costs were £50,000. You have £50,000 remaining.`;

      const buyTrainParagraph = document.createElement("p");
      buyTrainParagraph.textContent = "You now need to buy a train.";
      const newTrainParagraph = document.createElement("p");
      newTrainParagraph.textContent =
       "At this time you can only afford to buy the train engine the Sleeping Lion. The Sleeping Lion has a traveling speed of 60 miles per hour. It can pull four carriages. Which means your train will have a capacity of around 120 seated passengers";
      const traincost = document.createElement("p");
      traincost.textContent = `The Sleeping Lion will cost you £30,000 to purchase. Do you wish to buy the Sleeping Lion?`;

      // Append paragraphs to the instructions element:
      instructionsElement.appendChild(congratulationsParagraph);
      instructionsElement.appendChild(costsParagraph);
      instructionsElement.appendChild(buyTrainParagraph);
      instructionsElement.appendChild(newTrainParagraph);
      instructionsElement.appendChild(traincost);

      // Add button element:
      const buyButton = document.createElement("button");
      buyButton.id = "buybutton";
      buyButton.textContent = "Buy Train";

      // Append the button element to the instructions element:
      instructionsElement.appendChild(buyButton);

      //buybutton event listener

      document
       .getElementById("buybutton")
       .addEventListener("click", function () {
        // Check if you have enough money before purchase
        money = money - 30000; // Subtract 30000 from money
        const moneyDisplay = document.getElementById("moneydisplay");
        const moneyString = `£${money}`;
        moneyDisplay.textContent = moneyString;
        // Update instructions content after successful purchase
        instructionsElement.innerHTML = ""; // Clear previous content

        const successMessage = document.createElement("p");
        successMessage.textContent = `You now have a train line from ${firstCity} to ${secondCity} and a train! Press the button below to begin operations.`;
        instructionsElement.appendChild(successMessage);

        // Add button element:
        const trainButton = document.createElement("button");
        trainButton.id = "trainbutton";
        trainButton.textContent = "Start Train";

        // Append the button element to the instructions element:
        instructionsElement.appendChild(trainButton);

        trainButton.addEventListener("click", function () {
         console.log("Train Started");

         //emptyinstructions add improvement buttons
         instructionsElement.innerHTML = ""; // Clear previous content

         //randomgeneration of dailybonus
         function generateDailyBonus(minBonus, maxBonus) {
          const randomNumber =
           Math.floor(Math.random() * (maxBonus - minBonus + 1)) +
           minBonus;
          dailybonus += randomNumber;
          console.log(`Daily bonus of ${randomNumber} added!`);
         }

         //buy carriages

         //add carriages button

         const carriageButton = document.createElement("button");
         carriageButton.id = "trainbutton";
         carriageButton.textContent = "Buy Train Carriage";

         const carriageMessage = document.createElement("p");
         carriageMessage.textContent = `Buy another passenger carriage for your train for £20,000`;

         instructionsElement.appendChild(carriageMessage);

         // Append the button element to the instructions element:
         instructionsElement.appendChild(carriageButton);
         //cariagebutton logic

         carriageButton.addEventListener("click", () => {
          console.log("Carriage Bought");

          // Check if enough money is available
          if (money >= 20000) {
           // Check if maximum number of carriages reached
           if (numberOfCarriages < 4) {
            numberOfCarriages++;
            money -= 20000; // Subtract 20000 from money

            const moneyDisplay =
             document.getElementById("moneydisplay");
            const moneyString = `£${money}`;
            moneyDisplay.textContent = moneyString;

            // Update marker content using the previously retrieved reference
            markerContent.textContent = numberOfCarriages;
           } else {
            console.log(
             "Maximum number of carriages reached! You can't buy more."
            );
            instructionsElement.removeChild(carriageButton);
            instructionsElement.removeChild(carriageMessage);
           }
          }
         });

         //buy station cafes

         //add station one cafe button
         const stationOneMessage = document.createElement("p");
         stationOneMessage.textContent = `Open a cafe in ${firstCity} Station for £2,500.`;

         instructionsElement.appendChild(stationOneMessage);

         // Add button element:
         const cafeOneButton = document.createElement("button");
         cafeOneButton.id = "trainbutton";
         cafeOneButton.textContent = "Buy Cafe";

         // Append the button element to the instructions element:
         instructionsElement.appendChild(cafeOneButton);

         //cafeonelogic
         cafeOneButton.addEventListener("click", () => {
          if (money >= 2500) {
           // add a random number between 2000 and 7000 to dailbonus
           generateDailyBonus(2000, 7000); // Call with cafe bonus range
           cafeOneBonus = dailybonus;
           console.log("Cafe one bought");
           money -= 2500;
           if (firstCircleMarker) {
            firstCircleMarker.setRadius(40);
           }
           const moneyDisplay =
            document.getElementById("moneydisplay");
           const moneyString = `£${money}`;
           moneyDisplay.textContent = moneyString;
           instructionsElement.removeChild(cafeOneButton);
           instructionsElement.removeChild(stationOneMessage);
          } else {
          }
         });

         //add station two cafe buttons
         const stationTwoMessage = document.createElement("p");
         stationTwoMessage.textContent = `Open a cafe in ${secondCity} Station for £2,500.`;

         instructionsElement.appendChild(stationTwoMessage);

         // Add button element:
         const cafeTwoButton = document.createElement("button");
         cafeTwoButton.id = "trainbutton";
         cafeTwoButton.textContent = "Buy Cafe";

         // Append the button element to the instructions element:
         instructionsElement.appendChild(cafeTwoButton);

         //cafetwologic
         cafeTwoButton.addEventListener("click", () => {
          if (money >= 2500) {
           // Generate a random number between 2000 (inclusive) and 7000 (exclusive)
           generateDailyBonus(2000, 7000); // Call with cafe bonus range
           cafeTwoBonus = dailybonus;
           console.log("Cafe two bought");
           money -= 2500;
           if (secondCircleMarker) {
            secondCircleMarker.setRadius(40);
           }
           const moneyDisplay =
            document.getElementById("moneydisplay");
           const moneyString = `£${money}`;
           moneyDisplay.textContent = moneyString;
           instructionsElement.removeChild(cafeTwoButton);
           instructionsElement.removeChild(stationTwoMessage);
          } else {
          }
         });

         //buyhotel
         const hoteloneMessage = document.createElement("p");
         hoteloneMessage.textContent = `Open a hotel in ${firstCity} Station for £10,000.`;

         instructionsElement.appendChild(hoteloneMessage);

         // Add button element:
         const hoteloneButton = document.createElement("button");
         hoteloneButton.id = "trainbutton";
         hoteloneButton.textContent = "Buy Hotel";

         // Append the button element to the instructions element:
         instructionsElement.appendChild(hoteloneButton);
         //hotelonelogic
         hoteloneButton.addEventListener("click", () => {
          if (money >= 10000) {
           generateDailyBonus(8000, 24000); // Call with cafe bonus range
           hotelOneBonus = dailybonus;
           money -= 10000;
           const moneyDisplay =
            document.getElementById("moneydisplay");
           const moneyString = `£${money}`;
           moneyDisplay.textContent = moneyString;
           instructionsElement.removeChild(hoteloneButton);
           instructionsElement.removeChild(hoteloneMessage);
          } else {
          }
         });

         const hoteltwoMessage = document.createElement("p");
         hoteltwoMessage.textContent = `Open a hotel in ${secondCity} Station for £10,000.`;

         instructionsElement.appendChild(hoteltwoMessage);

         // Add button element:
         const hoteltwoButton = document.createElement("button");
         hoteltwoButton.id = "trainbutton";
         hoteltwoButton.textContent = "Buy Hotel";

         // Append the button element to the instructions element:
         instructionsElement.appendChild(hoteltwoButton);
         //hotelonelogic
         hoteltwoButton.addEventListener("click", () => {
          if (money >= 10000) {
           generateDailyBonus(8000, 24000); // Call with cafe bonus range
           hotelTwoBonus = dailybonus;
           money -= 10000;
           const moneyDisplay =
            document.getElementById("moneydisplay");
           const moneyString = `£${money}`;
           moneyDisplay.textContent = moneyString;
           instructionsElement.removeChild(hoteltwoButton);
           instructionsElement.removeChild(hoteltwoMessage);
          } else {
          }
         });

         // starttrain
         const firstPoint = L.latLng(
          firstCityCoords[1],
          firstCityCoords[0]
         );
         const secondPoint = L.latLng(
          secondCityCoords[1],
          secondCityCoords[0]
         );

         const intervalDuration = 10; // milliseconds per frame
         const distance = firstPoint.distanceTo(secondPoint);
         const steps = ((distance / speed) * 1000) / intervalDuration; // Assuming speed of 35 miles per hour
         const latStep = (secondPoint.lat - firstPoint.lat) / steps;
         const lngStep = (secondPoint.lng - firstPoint.lng) / steps;

         const marker = L.marker(firstPoint, {
          icon: L.divIcon({
           className: "circle-marker", // Add a CSS class for styling (optional)
           html: `<b>${numberOfCarriages}</b>`, // Include the number inside a bold tag
           iconSize: [20, 20], // Adjust iconSize as needed (optional)
          }),
         }).addTo(map);

         // Assuming the marker variable is defined in this scope
         const markerContent = marker.getElement().querySelector("b"); // Assuming bold tag for number

         const moveMarker = (speed) => {
          if (progress < steps) {
           const newLat = firstPoint.lat + latStep * progress;
           const newLng = firstPoint.lng + lngStep * progress;
           const newLatLng = L.latLng(newLat, newLng);

           marker.setLatLng(newLatLng); // Update the marker's position

           progress++;
           setTimeout(function () {
            moveMarker(speed);
           }, intervalDuration);
          } else {
           // Marker reaches the second point, update money
           money +=
            Math.floor(Math.random() * (2000 - 1000 + 1)) +
            1000 * numberOfCarriages;
           const moneyDisplay =
            document.getElementById("moneydisplay");
           const moneyString = `£${money}`;
           moneyDisplay.textContent = moneyString;

           // Wait two seconds before animating back and call moveBackMarker recursively
           setTimeout(() => {
            moveBackMarker(speed);
           }, 2000); // Wait for 2 seconds (2000 milliseconds)
          }
         };

         const moveBackMarker = (speed) => {
          // Corrected calculation for animating back from second point to first
          if (progress > 0) {
           const newLat =
            secondPoint.lat - latStep * (steps - progress);
           const newLng =
            secondPoint.lng - lngStep * (steps - progress);
           const newLatLng = L.latLng(newLat, newLng);

           marker.setLatLng(newLatLng); // Update the marker's position

           progress--;
           setTimeout(function () {
            moveBackMarker(speed);
           }, intervalDuration);
          } else {
           console.log("Reached starting point again.");
           // Add random number to money and update display
           money +=
            Math.floor(Math.random() * (2000 - 1000 + 1)) +
            1000 * numberOfCarriages;
           const moneyDisplay =
            document.getElementById("moneydisplay");
           const moneyString = `£${money}`;
           moneyDisplay.textContent = moneyString;

           // Reset progress for next round trip
           progress = 0;

           // Recursively call moveMarker to start next animation cycle
           moveMarker(speed);
          }
         };
         moveMarker(speed); // Start the animation
        });
       });
     }
    }
   });

   return circleMarker;
  },
 });
}

fetch("gb.geojson")
 .then((response) => response.json())
 .then((geojson) => {
  L.geoJSON(geojson, {
   fillColor: "none", // Style for polygon (empty fill)
   weight: 1,
   color: "#000",
   opacity: 1,
   fillOpacity: 0,
  }).addTo(map);
 })
 .catch((error) => {
  console.error("Error loading GeoJSON:", error);
 });

fetch("cities.geojson")
 .then((response) => response.json())
 .then((geojson) => {
  createCircleMarkers(geojson).addTo(map);
 })
 .catch((error) => {
  console.error("Error loading GeoJSON:", error);
 });

//24 hour clock display

const TIME_MULTIPLIER = 60 * 10; // 10 minutes = 600 seconds

// Function to format time in 24-hour format with leading zeros
function formatTime(hours, minutes) {
 // Handle the case where minutes reach 60 (should display the next hour)
 if (minutes === 60) {
  hours++;
  minutes = 0;
 }
 return `${hours.toString().padStart(2, "0")}:${minutes
  .toString()
  .padStart(2, "0")}`;
}

// Function to update the clock display and handle daily bonus
function updateClock() {
 const currentTime = new Date();

 // Simulate game time by multiplying actual time with multiplier
 const gameTime = new Date(currentTime.getTime() * TIME_MULTIPLIER);

 // Get hours and minutes in 24-hour format
 let hours = gameTime.getHours();
 // Get minutes and force them to the nearest multiple of 10 (ending in 0)
 let minutes = Math.floor(gameTime.getMinutes() / 10) * 10;
 // Format the time string with fixed minute handling
 const formattedTime = formatTime(hours, minutes);

 // Update the content of the div with the formatted time
 document.getElementById("timedisplay").textContent = formattedTime;

 // Check if it's midnight (00:00)
 if (hours === 0 && minutes === 0) {
  // Generate random daily bonus (modify as needed)
  money += cafeOneBonus + cafeTwoBonus + hotelOneBonus;
  const moneyDisplay = document.getElementById("moneydisplay");
  const moneyString = `£${money}`;
  moneyDisplay.textContent = moneyString;
  console.log(
   `Daily bonus of ${
    cafeOneBonus + cafeTwoBonus + hotelOneBonus + hotelTwoBonus
   } added! Total money: ${money}`
  ); // You can replace console.log with your desired action
 }
}

// Call the updateClock function initially
updateClock();

// Update the clock every second to simulate smooth time progression
setInterval(updateClock, 1000);
'