-1

I have a simple button which upon click will display a simple message

HTML code is as follows

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript test</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
          integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
          crossorigin=""/>
    <style media="screen">
        main
        {
          display:flex;
        }

        .address-list
        {
          width:20vw;
          height:100vh;
          /* overflow: auto;
          background: #f5f5f5;
          padding: 0 1rem; */
        }
        #map
        {
          width: 80vw;
          height: 100vh;
        }
    </style>
</head>

<body>

    <main>
        <div class="address-list">
             <input type = "button" onclick = "myfunction()" value = "Display">
        </div>
        <div id="map"></div>
    </main>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
            integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
            crossorigin="">
    </script>

    <!-- <script>
      function myfunction()
      {
          alert("user clicked on Display button");
      }
     </script> -->
    <script type="module" src="./script.js"></script>

</body>
</html>

Javascript code as follows

var map = L.map('map').setView([59.91200869359693, 10.742568969726562], 13);
        
  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);
        
        
        
   function myfunction()
   {
       alert("user clicked on Display button");
   }

When I have the function is HTML file itself it works fine but when I move the function to JS file it gives me error message as "Uncaught ReferenceError: myfunction is not defined". When I do the same in a project with no Leaflet JS involved the script runs as expected (both from HTML and external linked JS file). Is there a different way of calling a function when working with Leaflet? Everything else from JS file is executed fine the issue is when calling a function on user input.

5
  • 1
    Please edit your question and add all relevant code of how you use your function with Leaflet.
    – TomazicM
    Commented Oct 6, 2022 at 7:55
  • @TomazicM I update the code now as suggested Commented Oct 7, 2022 at 0:45
  • Any errors in the browse debugger console?
    – TomazicM
    Commented Oct 8, 2022 at 8:20
  • "Uncaught ReferenceError: myfunction is not defined" Commented Oct 9, 2022 at 8:24
  • You just have to leave out type="module" attribute from your script link statement, so it should be: <script src="./script.js"></script>
    – TomazicM
    Commented Oct 9, 2022 at 14:12

1 Answer 1

0

Following suggestion from @TomazicM worked for me

You just have to leave out type="module" attribute from your script link statement, so it should be: <script src="./script.js"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.