CODEWITHSUNDEEP
javascript
pjstewart1984
pjstewart1984

Reputation: 3

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

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();
};

Upvotes: 0

Views: 118

Answers (4)

Asif
Asif

Reputation: 397

 <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>

Upvotes: 0

freefaller
freefaller

Reputation: 19963

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());

Upvotes: 2

Anis R.
Anis R.

Reputation: 6922

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.');

Upvotes: 0

Dhananjai Pai
Dhananjai Pai

Reputation: 6005

Instead of alert, do this

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

Upvotes: 1

Related Questions