How do you display the output of a JavaScript function in an HTML element rather than a JavaScript alert?
[英]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.
我一直在使用 OpenLayers 5 创建交互式 web map。我添加了绘图功能（点、线、多边形）功能。 I want to display the coordinates of the most recently drawn point/vertexes in an HTML element rather than a JavaScript alert.我想在 HTML 元素而不是 JavaScript 警报中显示最近绘制的点/顶点的坐标。 What do I need to change to display the coordinates in an HTML element?我需要更改什么来显示 HTML 元素中的坐标？
I have been playing around with innerHTML but without success.我一直在玩 innerHTML 但没有成功。
//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();
};
4 个解决方案
解决方案1
2 已采纳 2019-10-07 16:06:16
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...或者，如果您使用的是 jQuery...
$("#feature_coordinates").text(evt.feature.getGeometry().getCoordinates());
解决方案2
1 2019-10-07 16:05:31
Instead of alert, do this而不是警报，这样做
document.getElementById('feature_coordinates').innerHTML = evt.feature.getGeometry().getCoordinates();
解决方案3
0 2019-10-07 16:05:55
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:使用空的 HTML 标记作为结果，您可以通过获取元素来显示 Javascript，然后像这样更新元素的 HTML：
var result = document.getElementById('feature_coordinates'); result.innerHTML = "Your result here.";
<p id="feature_coordinates"></p>
Or, using jQuery:或者，使用 jQuery：
$("#feature_coordinates").html('Your result here.');
解决方案4
0 2019-10-07 16:16:43
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.