Two scripts refuse to run together

I've encountered a strange issue while trying to run scripts within my .cshtml file. I am trying to run a script that sets an icon depending on how the user clicks on it, and other which uses the Leaflet Javascript library to display a map.

My issue is that only the last script to be listed in the section works (aka if I put star.js after mapdisplay.js, star.js would work and mapdisplay.js would not, and vice-versa).

I am running this on .NET 5.0

Index.cshtml - @section scripts

@section scripts {
    <script type="text/javascript" src="~/scripts/star.js"></script>
    
    <script>
        var lat = '@Model.Latitude';
        var long = '@Model.Longitude';
    </script>

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossorigin="">
    </script>
    <script type="text/javascript" src="~/scripts/mapdisplay.js"></script>
} 

And just in case, here's both scripts.

star.js

window.onload = function () {
    //Adds click event handler to make an AJAX request to star when the star is clicked
    $(".clickable").click(function () {
        let star = $(this);

        //Might be undefined if user deletes the attribute
        if (star.attr("reportId") != undefined) {
            let id = parseInt(star.attr("reportId"));

            //NaN might happen if user changes reportId attribute to something which isn't a number
            if (!isNaN(id)) {
                let dataToSend = {
                    reportId: id
                }

                //Sends ajax request
                $.ajax({
                    type: 'POST',
                    url: '/Home/Star',
                    data: dataToSend,
                    dataType: "json",
                    success: function (response) {
                        if (response) {
                            //If StarReport finished successfully, update the UI
                            if (star.hasClass("starred")) {
                                star.removeClass("starred").addClass("unstarred");
                            } else {
                                star.removeClass("unstarred").addClass("starred");
                            }
                        }
                    }
                });
            } else {
                alert("Don't mess with the code!");
            }
        } else {
            alert("Don't mess with the code!");
        }
    });
}

mapdisplay.js

window.onload = function () {
    //Creates map bounds
    let topLeftCorner = L.latLng(35.11111111115, 14.111111111);
    let bottomRightCorner = L.latLng(35.1123231312, 14.67243783646247);
    let bounds = L.latLngBounds(topLeftCorner, bottomRightCorner);

    let map = L.map("map", {
        center: L.latLng(lat, long),
        zoom: 14,
        zoomControl: false,
        dragging: false,
        keyboard: false,
        maxBoundsViscosity: 1.0
    });

    map.setMinZoom(18);

    L.tileLayer(
        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    ).addTo(map);

    marker = L.marker([lat, long], { draggable: false }).addTo(map);
}

Any help would be appreciated, as this is driving me nuts.