Question

我想在javascript中通过onchange事件获取位置坐标，我想在标签中显示该坐标。我试过以下场景我可以使用警告框来获取坐标但是我无法使用document.getElementsByName("coordinates").innerHTML = text3;

显示在标签上

我在下面分享了我的代码

<%--
  Created by IntelliJ IDEA.
  User: rajee
  Date: 2/15/15
  Time: 1:19 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <title>Create new Survey</title>
</head>
<body>
<h2>simple survey form</h2>
<form name="surveyform" method="post" action="CreateSurvey">
    <table>
        <tr><td>Family  name:</td><td><input type="text" name="familyName"></td></tr>
        <tr><td>First  name:</td><td><input type="text" name="firstName"></td></tr>
        <tr><td>Middle  name:</td><td><input type="text" name="middleName"></td></tr>
        <tr><td>Gender:</td><td><input type="radio" name="sex" value="male" checked>Male</td><td><input type="radio" name="sex" value="female">Female</td></tr>
        <tr><td>Birthday:</td><td><input type="date" name="dob"></td></tr>
        <tr><td>Income : A?B?C?D?</td><td><input type="text" name="income"></td></tr>
        <tr><td>Complete Address:</td><td><input type="text" name="address" id="address" onchange="codeAddress();"></td></tr>
        <tr><td>Coordinates:</td><td><label id="coordinates" name="coordinates"></label></td></tr>
        <tr><td>Mobile number:</td><td><input type="tel" name="mobileno"></td></tr>
        <tr><td>Email Address:</td><td><input type="email" name="email"></td></tr>
        <tr><td>Present internet provider:</td><td><input type="text" name="iprovider"></td></tr>
        <tr><td>Positive comments with present provider:</td><td><textarea name="comments" cols="40" rows="5"  ></textarea></td></tr>
        <tr><td>Negative remarks with present provider:</td><td><textarea name="remarks" cols="40" rows="5" ></textarea></td></tr>
        <tr><td><input type="submit" name="addsurvey" value="save survey details"></td><td><input type="reset" name="cancel" value="cancel"></td></tr>
    </table>

</form>

</body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script runat=server>
    var geocoder;
    var map;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = {
            zoom: 8,
            center: latlng
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }

    function codeAddress() {
        var address = document.getElementById('address').value;
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                //alert(results[0].geometry.location);
                var text3 = results[0].geometry.location;
                alert(text3);
                document.getElementsByName("coordinates").innerHTML = text3;
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

            } else {
                alert('Geocode was not successful for the following reason: ' + status);

            }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>
</html>

Answer 1

document.getElementsByName()返回与指定名称匹配的所有元素的集合，集合索引从0开始。

因此，如果标签是DOM中的第一个标签，那么

  document.getElementsByName('coordinates')[0].innerHTML = "text"

Answer 2

尝试使用ID它将起作用

 document.getElementsById('coordinates').innerHTML = "text"

如何在HTML标签标签中获取javascript变量文本值

2 个答案: