why does this javascript give the error that chosenColor is not defined - var map = L.map("map").setView(
    [51.30972224688452, -0.2523653990087098],
    16
);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "© OpenStreetMap contributors",
}).addTo(map);

var coordinates = [
    [51.308825549058525, -0.25823790701605276],
    [51.30839408180202, -0.2566395279193898],
    [51.307656036301125, -0.25480502463921084],
    [51.306917978929505, -0.2529705213580371],
    [51.3064864937372, -0.25129948866700147],
    [51.306179909687216, -0.24964159973208666],
    [51.3062253296757, -0.24715321409433955],
    [51.30670223684001, -0.24606341016544775],
    [51.307667390936444, -0.24471931865267038],
    [51.30821241016443, -0.24457401146190705],
    [51.30964305483954, -0.24436031366209932],
    [51.31014263453639, -0.24454194764962267],
    [51.310926055380605, -0.24546828099036588],
    [51.311743523740404, -0.25008178428984706],
    [51.31306400013452, -0.2569787258762801],
];

var horsetwo = [
    [51.30924537110482, -0.2583229938208831],
    [51.30856411139439, -0.25581644478381804],
    [51.307814714031, -0.25439969967663956],
    [51.30733781842764, -0.2530556081638622],
    [51.30688362753119, -0.2516388630557742],
    [51.306565691229196, -0.2500041571624365],
    [51.306474851881035, -0.24855108525656533],
    [51.3065202715776, -0.24738862773227766],
    [51.30736052785454, -0.24575392183893996],
    [51.307746586391005, -0.24531800026662154],
    [51.30860952902316, -0.2450637126837023],
    [51.309608705481565, -0.24477309830214722],
    [51.31019911770832, -0.24520901987355614],
    [51.31069869135118, -0.24597188262413283],
    [51.31278775856248, -0.25716053629662383],
];

var polyline = L.polyline(coordinates, { color: "red" }).addTo(map);
var polyline2 = L.polyline(horsetwo, { color: "blue" }).addTo(map);

var red = L.marker(coordinates[0]).addTo(map);
red._icon.classList.add("huechange");

var marker2 = L.marker(horsetwo[0]).addTo(map);

var currentIndex = 0; // Keep track of the current index
var currentIndex2 = 0; // Keep track of the current index for 'horsetwo'

var winnerDeclared = false; // Flag to track if winner is declared

function animateMarker() {
    animate(red, coordinates, currentIndex, "red");
}

function animateMarkerTwo() {
    animate(marker2, horsetwo, currentIndex2, "blue");
}


function handleButtonClick() {
    animateMarker();
    animateMarkerTwo();
}

var purse = 200;
document.getElementById("betting").innerHTML = "$" + purse;




// Function to handle radio button click event
function handleRadioButtonClick() {
    // Check which radio button is selected
    var color = document.querySelector('input[name="color"]:checked').value;
    
    // Create the button element
    var button = document.createElement("button");
    button.setAttribute("id", "bet");
    button.setAttribute("onclick", "handleBetClick()");
    button.textContent = "Place Bet";

    // Get the 'betting' element
    var bettingElement = document.getElementById("betting");

    // Append the button to the 'betting' element
    bettingElement.innerHTML = ""; // Clear previous content
    bettingElement.appendChild(button);

    // Add event listener to the newly created button
    button.addEventListener("click", handleBetClick);
}

// Add event listeners to radio buttons
document.getElementById("red").addEventListener("click", handleRadioButtonClick);
document.getElementById("blue").addEventListener("click", handleRadioButtonClick);
document.getElementById('red').onclick = handleBetClick.bind(this);
document.getElementById('blue').onclick = handleBetClick.bind(this);

function handleBetClick() {
  // Deduct 5 from the purse variable
  purse -= 5;

  // Assuming you have a reference to the parent div element and the labels/buttons you want to remove
  var parentDiv = document.getElementById('results'); // Get reference to the parent div

  // Get references to both labels and radio buttons
  var redLabel = document.querySelector('label[for="red"]'); // Get reference to the red label
  var blueLabel = document.querySelector('label[for="blue"]'); // Get reference to the blue label
  var redRadio = document.getElementById('red'); // Get reference to the red radio button
  var blueRadio = document.getElementById('blue'); // Get reference to the blue radio button

  // Check which radio button is checked
  var chosenColor = "";
  if (redRadio.checked) {
    chosenColor = "red";
  } else if (blueRadio.checked) {
    chosenColor = "blue";
  }

  // Write the chosen color to the results element
  if (chosenColor) {
    parentDiv.innerHTML = "You bet on " + chosenColor + " $" + purse;
  } else {
    parentDiv.innerHTML = "Please choose a color to bet on.";
  }

  // Add the Start Race button
  var startRaceButton = document.createElement('button');
  startRaceButton.textContent = "Start Race";
  startRaceButton.setAttribute('onclick', 'handleButtonClick()'); // Set onclick event handler
  parentDiv.appendChild(startRaceButton);

  
}
function animate(red, coords, index, markerName) {
    var distance = red.getLatLng().distanceTo(coords[index + 1]);
    var minSpeed = 160;
    var minDuration = (distance / minSpeed) * 1000;
    var maxDuration = 2000;
    var duration = Math.random() * (maxDuration - minDuration) + minDuration;
    var startTime = Date.now();

    function easeInOut(t) {
        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
    }

    function animateStep() {
        var elapsed = Date.now() - startTime;
        var progress = elapsed / duration;
        var easedProgress = easeInOut(progress);

        if (progress < 1) {
            var currentCoord = coords[index];
            var nextCoord = coords[index + 1];
            var lat = currentCoord[0] + (nextCoord[0] - currentCoord[0]) * easedProgress;
            var lng = currentCoord[1] + (nextCoord[1] - currentCoord[1]) * easedProgress;
            var interpolatedLatLng = L.latLng(lat, lng);
            red.setLatLng(interpolatedLatLng);
            requestAnimationFrame(animateStep);
        } else {
            index++;
            if (index < coords.length - 1) {
                setTimeout(function () {
                    animate(red, coords, index, markerName);
                }, 500);
            } else {
                if (!winnerDeclared) {
                    winnerDeclared = true;
                    document.getElementById("results").innerHTML = "The winner is " + markerName;
                    if (chosenColor === markerName) {
          purse += 10;
          document.getElementById("betting").innerHTML = "$" + purse;
        }
                }
            }
        }
    }

    animateStep();
}