i have coded for me a little OL script to display GPX Routes in a OSM map. That works so far, even with a little gimmick.
What I miss is a continuous distance. So from trkpt 0 to trkpt 1 + (trkpt 1 to trkpt 2) + (trkpt 2 to trkpt 3) ...
For the gimmick I use the array keys. Each array key is an (internal) point where data is calculated.
In Openlayers is an array with all coordinates + the elevation. I would like to extend this array by the distance. Whether the array values should be the continuous distance or that from last-trkpt to next-trkpt, I would have to think twice. Maybe a value with last-trkpt to next-trkpt is probably better.

Please test by yourself possible "duplicates" before you vote my question as such.

Please a solution without OL npm. I use only the ol.css and ol.js v5.3.0.

HTML:

    <input type="file" id="files" name="files[]" >
    <div id="map" class="map"></div>

Javascript:

    var gpxFormat = new ol.format.GPX();
    var gpxFeatures;
    var coordsarray = [];
    var GPXgeometry = [];
    function handleFileSelect(evt) {
    
    gpxLayer.getSource().clear();
    
    var files = evt.target.files;
    
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
    var reader = new FileReader();
    reader.readAsText(files[i], "UTF-8");
    reader.onload = function (evt) {
    gpxFeatures = gpxFormat.readFeatures(evt.target.result,{
    dataProjection:'EPSG:4326',
    featureProjection:'EPSG:3857'
    });
    gpxLayer.getSource().addFeatures(gpxFeatures);
    
    var features = gpxLayer.getSource().getFeatures();
    features.forEach(function(feature) {
    GPXgeometry = feature.getGeometry();
    coordsarray = feature.getGeometry().getCoordinates();
    });
    
    //--- ??? Start
    
    var i = 0;
    var distance = 0;
    coordsarray[0][i].push(distance):
    
    // for ???
    
    var lat0 = coordsarray[0][i][0];
    var lon0 = coordsarray[0][i][1];
    var latlon0 = [lat0, lon0];
    i++;
    var lat1 = coordsarray[0][i][0];
    var lon1 = coordsarray[0][i][1];
    var latlon1 = [lat1, lon1];
    
    // calculate distance
    // ???
    
    coordsarray[0][i].push(distance):
    i--;
    
    //--- ??? End
    
    }
    
    
    var gpxLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
    
    })
    });
    
    
    var map = new ol.Map({
    target: 'map',
    layers: [
    new ol.layer.Tile({
    source: new ol.source.OSM()
    }),
    gpxLayer
    ]
    });
    
    document.getElementById('files').addEventListener('change', handleFileSelect, false);

Example of var coordsarray:

    console.log(coordsarray[0][0][0]); // -37937.014545402875
    console.log(coordsarray[0][0][1]); // 5354259.990656373
    console.log(coordsarray[0][0][2]); // 188.5
    console.log(coordsarray[0][1][0]); // -37936.012669985736
    console.log(coordsarray[0][1][1]); // 5354231.092259876
    console.log(coordsarray[0][1][2]); // 188.5