在 HTML 文件中使用來自不同 javascript 文件的變量時出錯

Question

當我使用在外部 javascript 文件中定義的變量時，我不確定為什么會不斷收到未定義的錯誤。 我想從我的 html 文件中的 vvvjavascript.js 文件訪問地址變量。 我收到錯誤 - 未捕獲的 ReferenceError：未定義地址”。不確定是什么原因造成的。代碼如下

外部 Javascript 文件 (vvvjavascript.js)`

    var addresses = [
  [
    [43.674687, -79.430955],
    [43.668560, -79.394924]
  ],
  [
    [43.682191, -79.417886],
    [43.680790, -79.417379]
  ],
  [
    [43.640381, -79.394508],
    [43.640575, -79.394586]
  ]
];

第二個文件

  function initMap() {
    var directionsRenderer = new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();
    var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 7,
      center: {
        lat: 41.85,
        lng: -87.65
      }
    });
    directionsRenderer.setMap(map);
    directionsRenderer.setPanel(document.getElementById("right-panel"));
    

    var onChangeHandler = function() {
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    };

    document.getElementById("submit").addEventListener("click", onChangeHandler);
  }
  
// calcRoute();


  function calculateAndDisplayRoute(directionsService, directionsRenderer) {
    var start_lat = document.getElementById("origin_lat").value;
    var start_lng = document.getElementById("origin_long").value;

    var end_lat = document.getElementById("destination_lat").value;
    var end_lng = document.getElementById("destination_long").value;

    var start = new google.maps.LatLng(start_lat, start_lng); 
    var end = new google.maps.LatLng(end_lat, end_lng); 

    directionsService.route(
      {
        origin: start,
        destination: end,
        travelMode: "DRIVING"
      },
      function(response, status) {
        if (status === "OK") {
          directionsRenderer.setDirections(response);
          
          var foundPoints = [];
      for (k = 0; k < addresses.length; k++) {
        if (google.maps.geometry.poly.isLocationOnEdge(addresses[k][0], response.routes[0], 1e-3) || google.maps.geometry.poly.isLocationOnEdge(addresses[k][1], response.routes[0], 1e-3)) {
            foundPoints.push(k);
          alert("route number " + k );
        } 
      }
          
        } else {
          window.alert("Directions request failed due to " + status);
        }
 
      }
       
    );
  }

HTML 用於第二個文件

<!DOCTYPE html>
<html>
  <head>
    <title>Displaying Text Directions With setPanel()</title>
    <script type="text/javascript" src="vvvjavascript.js"></script>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" defer></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
  
    <div id="right-panel"></div>
    <div id="map"></div>
  
<button type="button" id="submit">Submit</button>
  <label for="origin_lat">Origin latitude:</label>
  <input type="text" id="origin_lat" name="origin_lat" value=" "><br>
   <label for="origin_long">Origin longitude:</label>
  <input type="text" id="origin_long" name="origin_long" value=" "><br>
  <label for="destination_lat">Destination latitude:</label>
  <input type="text" id="destination_lat" name="destination_lat" value=" "><br>
  <label for="destination_long">Destination longitude:</label>
  <input type="text" id="destination_long" name="destination_long" value=" "><br><br><br><br>


  
  </body>
</html>

Answer 1

你在哪里包含你的第二個文件？ 我的第一個猜測是，您的第二個文件中的代碼是在加載 vvvjavascript.js 之前執行的。 這就是為什么它不能知道變量的原因。 這里有一些很好的例子，如何包含如何在另一個 JavaScript 文件中包含 JavaScript 文件？

Answer 2

您需要將第一個 javascript 文件導入到第二個文件中。 如果您可以訪問第一個，最簡單的方法是從那里導出變量： export var addresses = [...並導入第二個： import { addresses } from './vvvjavascript.js' 。

在 HTML 文件中使用來自不同 javascript 文件的變量時出錯

問題描述

2 個解決方案

解決方案1
0 2020-08-07 00:22:14

解決方案2
0 2020-08-07 00:22:28

在 HTML 文件中使用來自不同 javascript 文件的變量時出錯

問題描述

2 個解決方案

解決方案1 0 2020-08-07 00:22:14

解決方案2 0 2020-08-07 00:22:28

解決方案1
0 2020-08-07 00:22:14

解決方案2
0 2020-08-07 00:22:28