How do you display the output of a JavaScript function in an HTML element rather than a JavaScript alert?

Question

I have been creating an interactive web map with OpenLayers 5. I have added draw feature (point, line, polygon) functionality. I want to display the coordinates of the most recently drawn point/vertexes in an HTML element rather than a JavaScript alert. What do I need to change to display the coordinates in an HTML element?

I have been playing around with innerHTML but without success.

//Where I would prefer to display the coordinates
<div id="drawn_feature_coordinates"></div>

//Imports the required OpenLayers modules
import {Vector as VectorSource} from 'ol/source';
import {Vector as VectorLayer} from 'ol/layer';
import {Style, Circle as CircleStyle, Fill, Stroke} from 'ol/style';
import {Draw, Snap} from 'ol/interaction';

//Adds drawing functionality (pt. 1)
//Provides a source of features for vector layers
var source = new VectorSource();
var vector = new VectorLayer({
    source: source,
//Dictates the style of the drawn features
    style: new Style({
        image: new CircleStyle({
            radius: 6,
            fill: new Fill({
                color: 'rgba(255, 204, 51, 1)'
            }),
        }),
        stroke: new Stroke({
            width: 2.6,
            color: 'rgba(255, 204, 51, 1)'
        }),
        fill: new Fill({
            color: 'rgba(255, 204, 51, 0.35)'
        })
    })
});

//Adds drawing functionality (pt. 2)
var draw, snap;

//Links the geometry type dropdown menu to the drawing functionality
var typeSelect = document.getElementById('dropdown_menu');

//Adds the drawing and snap interactions
function addInteractions() {
    var value = typeSelect.value;
//Dictates there is drawing functionality only when something other than off has been selected from the geometry type dropdown menu
    if (value !== 'Off') {
        draw = new Draw({
            source: source,
            type: typeSelect.value
        });
//Gets the drawn feature coordinates I want to display in the HTML element
        draw.on('drawend', function(evt) {
//Displays the coordinates in a JavaScript alert 
            alert(evt.feature.getGeometry().getCoordinates());
        });
        map.addInteraction(draw);
        snap = new Snap({
            source: source
        });
        map.addInteraction(snap);
    }
};

//Resets the drawing functionality when a different geometry type is selected
typeSelect.onchange = function() {
    map.removeInteraction(draw);
    map.removeInteraction(snap);
    addInteractions();
};

freefaller · Accepted Answer · 2019-10-07 16:06:16Z

2

It's as simple as replacing...

alert(evt.feature.getGeometry().getCoordinates());

With...

document.getElementById("feature_coordinates").innerHTML = evt.feature.getGeometry().getCoordinates();

Or if you're using jQuery...

$("#feature_coordinates").text(evt.feature.getGeometry().getCoordinates());

answered Oct 7, 2019 at 16:06

freefaller

20k7 gold badges62 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pjstewart1984 Over a year ago

This works! And such a quick response. Thanks so much (and thanks to everyone else that responded!).

freefaller Over a year ago

You're welcome. Good luck with the rest of your project :-)

Dhananjai Pai · Accepted Answer · 2019-10-07 16:05:31Z

1

Instead of alert, do this

document.getElementById('feature_coordinates').innerHTML = evt.feature.getGeometry().getCoordinates();

answered Oct 7, 2019 at 16:05

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

Comments

Anis R. · Accepted Answer · 2019-10-07 16:05:55Z

0

Using an empty HTML tag for the result, you can display your Javascript by getting the element, and then updating the element's HTML like so:

var result = document.getElementById('feature_coordinates');
result.innerHTML = "Your result here.";

<p id="feature_coordinates"></p>

Or, using jQuery:

$("#feature_coordinates").html('Your result here.');

answered Oct 7, 2019 at 16:05

Anis R.

7,0022 gold badges17 silver badges44 bronze badges

Comments

Asif · Accepted Answer · 2019-10-07 16:16:43Z

0

 <script>
         function showName() {  
            document.getElementById('showMsg').innerHTML="this is invalid name";
         }
    </script>

<html>
    <input type=text id="name" name="name" onclick="showName()"/>
    <span id="showMsg"></span>
</html>

answered Oct 7, 2019 at 16:16

Asif

4071 gold badge5 silver badges13 bronze badges

Collectives™ on Stack Overflow

How do you display the output of a JavaScript function in an HTML element rather than a JavaScript alert?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related