In this javascript add a click event for the button to console log 'button clicked' - var money = 100000;

const map = L.map('map').setView([54.2231637,-1.9381623], 6);
let clickedPoints = [];
let isLineDrawn = false;

// 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
      });

      // Bind a popup with city name on mouseover
      circleMarker.on('mouseover', function () {
        this.bindPopup(feature.properties.city).openPopup();
      });

      // Add click event listener to store clicked point coordinates
      circleMarker.on('click', function (e) {
        if (!isLineDrawn) {
          clickedPoints.push(e.latlng);

          // Create a polyline if two points have been clicked
          if (clickedPoints.length === 2) {
            const polyline = L.polyline(clickedPoints).addTo(map);
            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.';

            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 Liverpool Lion. The Liverpool Lion has a top speed of 35 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 Liverpool Lion will cost you £20,000 to purchase. Do you wish to buy the Liverpool 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)

          }
        }
      });

      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);
  });