in this javascript for leafletjs I am using   e.stopPropagation(); on polygons to ensure that the map click event is also not called. This works in ensuring the polygon click event works and the map click event isn't called however it still gives an error that 'e.stopPropagation is not a function' - 'let money = 100000;
let numberOfBuildings = 0; 
let dailybonus = 0;

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

const map = L.map('map').setView([51.5352028, 0.0054299], 17);

// fetch house data

// Event listener for when the map is clicked
map.on('click', function (e) {
  // Update building radius and city coordinates
  let buildingRadius = 300;
  let firstCityCoords = [e.latlng.lat, e.latlng.lng];

  if (money >= 100000) {
    // Code to execute when money is 100,000 or more (original code goes here)
    money -= 50000;
     
    const overpassQuery = `
[out:json];
way["building"="house"](around:${buildingRadius},${firstCityCoords[0]},${firstCityCoords[1]});
out body;
>;
out skel qt;
`;

    fetch('https://overpass-api.de/api/interpreter', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: 'data=' + encodeURIComponent(overpassQuery),
    })
      .then((response) => response.json())
      .then((data) => {
    
    // Update money display after successful building placement
    const moneyElement = document.getElementById("moneydisplay");
    moneyElement.textContent = `£${money}`;
      
        numberOfBuildings = data.elements.length; // Get the length of the array after fetching data
        dailybonus += numberOfBuildings; 
        // Process the data returned by the Overpass API
        data.elements.forEach((element) => {
          if (element.type === 'way') {
            // Extract coordinates from the way element
            const coordinates = element.nodes.map((nodeId) => {
              const node = data.elements.find(
                (node) => node.id === nodeId
              );
              return [node.lat, node.lon];
            });

            // Create a polygon for the building
            const polygon = L.polygon(
              coordinates,
              {
                color: 'black', // Set building outline color
                weight: 2, // Set building outline weight
                fill: true, // Fill the building outline
                fillColor: 'gray', // Set building fill color
                fillOpacity: 0.5, // Set building fill opacity
              }
            ).addTo(map);
            
           

            // Add click functionality to the polygon (optional)
            polygon.on('click', (e) => {
              // Handle click event on the building footprint
              console.log('Building footprint clicked!');
              e.stopPropagation();
              // Change polygon fill color to green

            });
          }
        });

        // Display message after creating polygons (uses the updated numberOfBuildings)
        const messageDisplay = document.getElementById('messageDisplay');
        messageDisplay.innerHTML = `Congratulations you have leased ${numberOfBuildings} buildings for £50,000! You will earn £${numberOfBuildings} per day from these leases. <p> You can now click on individual buildings on the map to buy them and start earning rent as well.</p>`;
      
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });
  } else {
    // Code to execute when money is less than 100,000 (optional)
    console.log("You don't have enough money to build!");
      // Display message after creating polygons (uses the updated numberOfBuildings)
        const messageDisplay = document.getElementById('messageDisplay');
        messageDisplay.textContent = `Sorry you don't have enough money. You need at least £100,000 to buy land.`;

  }
});

//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) {
    // add dailybonus
    money += dailybonus;
    const moneyDisplay = document.getElementById("moneydisplay");
    const moneyString = `£${money}`;
    moneyDisplay.textContent = moneyString;
    console.log(
      
   
    ); // 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);

'