Creating a time slider with mapbox gl js – Blancer.com Tutorials and projects

I want to filter the yield by time with the help of a slider in my application that I developed in Apache netbeans. When I run this html file with vs code, I can see the yield on the frontend, but when I run it with apache netbeans, I can’t get the yield. What could be the reason?………………………………………………………………………………………………………………………………………………………………….

<html>
<head>
    <meta charset='utf-8' />
    <title>Pride Parade Map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <style>

.map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 25%;
    top: 0;
    left: 0;
    padding: 10px;
}
.map-overlay .map-overlay-inner {
    background-color: #fff;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
}

        .map-overlay input {
            background-color: transparent;
            display: inline-block;
            width: 25%;
            position: absolute;
            margin: 0;
            cursor: ew-resize;
            bottom: 30px;
        }
        </style>


<div id='map'></div>

<div class='map-overlay top'>
    <div class='map-overlay-inner'>
       
        <label id='time'></label>
        <input id='slider' type='range' min='0' max='17' step='1' value='0' />
    </div>
    
</div>

<script src="https://d3js.org/d3.v4.min.js"></script>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidHVnY2UtdGF5IiwiYSI6ImNrd3o3dTM1eTBmaWIycXB6bHlwb3djb2UifQ.GiUzrj8Wtb2JcDYcc3Xk6w';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    center: [35, 40],
    zoom: 5
});

var times = [
'1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    '10',
    '11',
    '12'
];

function filterBy(time) {
    var filters = ['==', 'time', parseInt(times[time])];
    // id of layer applied,, filters
    map.setFilter('time-circles', filters);
   

    // Set the label to the month
    document.getElementById('time').textContent = times[time]; 
}

map.on('load', function() {
    d3.json('time.geojson', function(data) {

        map.addSource('time-parades', {
            'type': 'geojson',
            'data': data
        });

        // is it possible to use < or > in expressions?
        map.addLayer({
            'id': 'time-circles',
            'type': 'circle',
            'source': 'time-parades',
            'paint': {
                'circle-color': [
                    'interpolate',
                    ['linear'],
                    ['get', 'time'],
                    5, '#9400D3',
                    10, '#0000FF',
                    15, '#00FF00'
                    
                ],
                'circle-opacity': 0.75,
                'circle-radius': [
                    'interpolate',
                    ['linear'],
                    ['get', 'time'],
                    5, 5,
                    15, 5
                ]
            }
        });

       

        filterBy(0);

        document.getElementById('slider').addEventListener('input', function(e) {
            var time = parseInt(e.target.value, 10); // need to change the 10
            filterBy(time);
        });
    });
});
</script>```