Adding mouse move to my map using OpenLayers

Question

I'm a new JavaScript coder. I'm adding a mouse move to my map using OpenLayers but it's not working to display coordinate in my mouse.

1 - The first step I wrote this code in my js file:

map.on('pointermove', function(event) {
    var coord3857 = event.coordinate;
    var coord4326 = ol.proj.transform(coord3857, 'EPSG:3857', 'EPSG:4326');
    $('#mouse3857').text(ol.coordinate.toStringXY(coord3857, 2));
    $('#mouse4326').text(ol.coordinate.toStringXY(coord4326, 5));
});

2- Then I added this in the HTML file :

<p>Coordonnées géographiques de la souris dans les différents systèmes de projection:</p>
<p>
    EPSG:3857 > <span id="mouse3857" class="label">0 / 0</span>
    EPSG:4326 > <span id="mouse4326" class="label">0 / 0</span>
</p>

It's not working, and I don't know why.

I have two messages :

ReferenceError: $ is not defined ($the dolar is replacing document.getElementById('')

If I change the $ to document.getElementById('mouse3857'), I have a message of:

TypeError: document.getElementById(...) is null.

So do I need to do something else in HTML file or calling jQuery file?

Answer 1

If you use document.getElementById method to get HTML element, then you must use it's innerHTML property to change it's content.

This should work without need for jQuery:

map.on('pointermove', function(event) {
    var coord3857 = event.coordinate;
    var coord4326 = ol.proj.transform(coord3857, 'EPSG:3857', 'EPSG:4326');
    document.getElementById('mouse3857').innerHTML = ol.coordinate.toStringXY(coord3857, 2);
    document.getElementById('mouse4326').innerHTML = ol.coordinate.toStringXY(coord4326, 5);
});