未知のReferenceError：HTMLInputElement.onclickでSearchAddressが定義されていません

-1

私は移動可能なポイントを持つGoogleマップAPIを作成しようとしていますが、アドレスを検索するための検索オプションも含まれています。私はドラッグ可能な点を得ましたが、Uncaught ReferenceErrorを取得しました。このコードを試して実行すると、SearchAddressはHTMLInputElement.onclickで定義されていません。私はこれをどのように動作させるかを理解できません。私は、他のInitMap関数からSearchAddress関数を削除しようとしましたが、それでもヘルプは非常に高く評価されます。未知のReferenceError：HTMLInputElement.onclickでSearchAddressが定義されていません

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title>Draggable directions</title> 
<link rel="stylesheet" type="text/css" href="stylesheet1.css"> 

<script type="text/javascript"> 

var x = document.createElement("INPUT"); 
    x.setAttribute("type", "text"); 

var moveloc1 = {lat: 55, lng: -7.3}; 
var moveloc2 = {lat: 55, lng: -7.1}; 



function initMap() 
{ 
    console.log("error checker1"); 
    var geocoder = new google.maps.Geocoder();  
    var map = new google.maps.Map(document.getElementById('map'), 
    { 
     zoom: 14, 
     center: {lat: 55, lng: -7.3} // Australia. 
    }); 

    var directionsService = new google.maps.DirectionsService; 
    var directionsDisplay = new google.maps.DirectionsRenderer 
    ({ 
     draggable: true, 
     map: map, 
     panel: document.getElementById('right-panel') 
    }); 

    directionsDisplay.addListener('directions_changed', function() 
    { 
     computeTotalDistance(directionsDisplay.getDirections()); 
    }); 

    displayRoute(moveloc1, moveloc2 , directionsService, 
    directionsDisplay); 
    console.log("error checker2"); 
    function SearchAddress() 
    { 
     console.log("error checker3"); 

     var locate1 = document.getElementById("pass1").value; 
     var locate2 = document.getElementById("pass2").value; 
     console.log(locate1); 
     console.log(locate2); 
     geocoder.geocode({ 'pass1': address}, function(results, status) 
     { 
      if (status == 'OK') 
      { 
       map.setCenter(results[0].geometry.location); 
       moveloc1 = 
       ({ 
        position: results[0].geometry.location 
       }); 
      } 
      else 
      { 
      alert('Geocode was not successful for the following reason: ' + 
status); 
      } 
     }); 

    } 
} 

    function displayRoute(origin, destination, service, display) 
    { 
    service.route 
    ({ 
     origin: origin, 
     destination: destination, 
     travelMode: 'DRIVING', 
     avoidTolls: true 
    }, 
    function(response, status) 
    { 
     if (status === 'OK') 
     { 
      display.setDirections(response); 
     } 
     else 
     { 
      alert('Could not display directions due to: ' + status); 
     } 
    }); 
    } 

    function computeTotalDistance(result) 
    { 
    var total = 0; 
    var myroute = result.routes[0]; 
    for (var i = 0; i < myroute.legs.length; i++) 
    { 
     total += myroute.legs[i].distance.value; 
    } 
    total = total/1000; 
    document.getElementById('total').innerHTML = total + ' km'; 
    } 

</script> 

</head> 

<body> 
<div id="map"></div> 
<div id="right-panel"> 
<form> 
Start<input class="textBox" id="pass1" type="text" maxlength="30" /> <br> 
End<input class="textBox" id="pass2" type="text" maxlength="30" /> 
<input type = "button" id="button" name="button" value="search" onclick = 
"SearchAddress()"/> 
</form> 
<p>Total Distance: <span id="total"></span></p> 
</div> 

<script async defer 
src="https://maps.googleapis.com/maps/api/js? 
key=AIzaSyBtQt_1BqPPuSdIbXTuYW9I8yNUGIItPuk&callback=initMap"> 
</script> 
    </body> 
</html>`

出典

2017-05-08 John Bon

あなたはあなたのソースコードにそのタイプミスがありましたか？文書は '<！DOCTYPE html> 'で始まる必要があります –

コードは<！DOCTYPE html>で始まります。 –

<script type="text/javascript"> 

var x = document.createElement("INPUT"); 
    x.setAttribute("type", "text"); 
var geocoder; 
var moveloc1 = {lat: 55, lng: -7.3}; 
var moveloc2 = {lat: 55, lng: -7.1}; 

function SearchAddress() 
{ 
    console.log("error checker3"); 

    var locate1 = document.getElementById("pass1").value; 
    var locate2 = document.getElementById("pass2").value; 
    console.log(locate1); 
    console.log(locate2); 
    // adress must be defined 
    geocoder.geocode({ 'pass1': adress}, function(results, status) 
    { 
     if (status == 'OK') 
     { 
      map.setCenter(results[0].geometry.location); 
      moveloc1 = 
      ({ 
       position: results[0].geometry.location 
      }); 
     } 
     else 
     { 
     alert('Geocode was not successful for the following reason: ' + 
status); 
     } 
    }); 

} 

function initMap() 
{ 
    console.log("error checker1"); 
    geocoder = new google.maps.Geocoder();  
    var map = new google.maps.Map(document.getElementById('map'), 
    { 
     zoom: 14, 
     center: {lat: 55, lng: -7.3} // Australia. 
    }); 

    var directionsService = new google.maps.DirectionsService; 
    var directionsDisplay = new google.maps.DirectionsRenderer 
    ({ 
     draggable: true, 
     map: map, 
     panel: document.getElementById('right-panel') 
    }); 

    directionsDisplay.addListener('directions_changed', function() 
    { 
     computeTotalDistance(directionsDisplay.getDirections()); 
    }); 

    displayRoute(moveloc1, moveloc2 , directionsService, 
    directionsDisplay); 
    console.log("error checker2"); 

} 

    function displayRoute(origin, destination, service, display) 
    { 
    service.route 
    ({ 
     origin: origin, 
     destination: destination, 
     travelMode: 'DRIVING', 
     avoidTolls: true 
    }, 
    function(response, status) 
    { 
     if (status === 'OK') 
     { 
      display.setDirections(response); 
     } 
     else 
     { 
      alert('Could not display directions due to: ' + status); 
     } 
    }); 
    } 

    function computeTotalDistance(result) 
    { 
    var total = 0; 
    var myroute = result.routes[0]; 
    for (var i = 0; i < myroute.legs.length; i++) 
    { 
     total += myroute.legs[i].distance.value; 
    } 
    total = total/1000; 
    document.getElementById('total').innerHTML = total + ' km'; 
    } 

</script>

出典

2017-05-08 14:05:46

関数内の関数をそのように参照することはできませんか？ –

これは、Uncaught ReferenceErrorを作成します。ジオコーダがSearchAddress（index.php：60）で定義されていないで、HTMLInputElement.onclickエラーが発生しました。私が知る限り、地図が宣言されたときにジオコーダーを宣言する必要があります。 –

initMap（）が呼び出されていないなど、あなたのマップスクリプトがまだロードされておらず、コールバックを呼び出すなどのように、外部関数があなたのケースのinitMap（）で呼び出されたときに限り、このように宣言できます。 –

問題：

あなたの問題はあなたがinitMap関数の内部でSearchAddress機能を宣言し、あなたが不可能である、（HTML要素に）グローバルスコープからアクセスしようとしたことです。

説明：実際に

ローカル関数とローカル変数は、グローバルスコープまたは他の関数からアクセスすることができません。 HTML要素のイベントでは、グローバルwindowスコープで宣言された関数にしかアクセスできないことに注意してください。

グローバルスコープで宣言して、すべての関数とHTML要素からアクセスできるようにする必要があります。

注：

あなたはあなたのコード内のすべての関数の宣言とその問題を修正する必要があります。

出典

2017-05-08 16:11:12

未知のReferenceError：HTMLInputElement.onclickでSearchAddressが定義されていません

答えて

関連する問題