Invalid LngLat object: (NaN, NaN) - getElementById not returning values

Question

The user positions a marker which adds the Latitude and longitude to a form, this lat & long are populated based on the users entry to the database. When trying to show the user where they set the marker and saved their lat and lon, I would like the mapbox marker to be placed using this lat and long figures.

When using document.getElementById('savedlong'); this is returning Invalid LngLat object: (NaN, NaN).

Javascript

window.onload = function() {
    var marker_lat = document.getElementById('savedlong');
    var marker_long = document.getElementById('savedlat');

    var marker = new mapboxgl.Marker({
        element:markerElement,
        draggable: false
    })
    .setLngLat([marker_long, marker_lat])
    .addTo(map);
    }

HTML

<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
          <div class="card-body">
               {% for instance in object_list %}
                    <p>Safezone name: {{instance.name}}</p>
                    <p>Alert email: {{instance.useremail}}</p>
                    <p id="savedlong">{{instance.longitudecentre}}</p>
                    <p id="savedlat">{{instance.latitudecentre}}</p>
                {% endfor %}

          </div>
      </div>

Answer 1

You are passing the html element to setLngLat not the number value inside the p element,get the value and then parse it

const marker_lat = parseFloat(document.getElementById('savedlong').innerHTML);