When I use an import statement to import a method from a JS file it causes the rest of the methods in the file to not be called.Both files are in same directory
This is my searchBar.js file which has a searchbar component and a method that is called to create that component. However, when I have the import statement the create search bar method is never called.
import {addStops} from "./map.js";
function createSearchBar() {
console.log("method called")
const searchBar = document.createElement('input');
searchBar.setAttribute('id', 'lineSearchBar');
searchBar.setAttribute('type', 'text');
searchBar.setAttribute('name', 'search');
searchBar.setAttribute('placeholder', 'Search a Bus Line');
searchBar.style.fontFamily = 'Arial, sans-serif';
searchBar.style.fontSize = '16px';
searchBar.style.padding = '10px';
searchBar.style.border = '1px solid #ccc';
searchBar.style.borderRadius = '5px';
searchBar.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
searchBar.style.width = '25%';
searchBar.style.margin = '10px';
searchBar.style.boxSizing = 'border-box';
searchBar.style.position = 'relative'; // Set position to relative
document.body.appendChild(searchBar);
const suggestionsContainer = document.createElement('div');
suggestionsContainer.setAttribute('id', 'suggestionsContainer');
suggestionsContainer.style.position = 'absolute'; // Position suggestions container absolutely
suggestionsContainer.style.top = 'calc(100% + 5px)';
suggestionsContainer.style.left = '0';
suggestionsContainer.style.width = '100%';
suggestionsContainer.style.backgroundColor = '#fff';
suggestionsContainer.style.border = '1px solid #ccc';
suggestionsContainer.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
searchBar.parentNode.appendChild(suggestionsContainer); // Append suggestions container to searchBar's parent
searchBar.addEventListener('keyup', function(event) {
const searchTerm = event.target.value.trim().toLowerCase();
const suggestionsContainer = document.getElementById('suggestionsContainer');
suggestionsContainer.innerHTML = '';
const matchingRoutes = Object.keys(shortNameBusLines).filter(route => route.toLowerCase().includes(searchTerm));
matchingRoutes.forEach(route => {
const suggestion = document.createElement('div');
suggestion.textContent = route;
suggestion.style.cursor = 'pointer';
suggestion.style.padding = '5px';
suggestion.style.borderBottom = '1px solid #ccc';
suggestion.addEventListener('click', function() {
searchBar.value = route;
suggestionsContainer.innerHTML = '';
makeLineRequest(searchBar.value);
});
suggestionsContainer.appendChild(suggestion);
});
});
}
createSearchBar();
Here is the method from (map.js) that has the method I am importing :
export default function addStops(stops) {
for (const key in stops) {
if (dict.hasOwnProperty(key)) {
const coords = dict[key];
const lat = parseFloat(coords[0]);
const lon = parseFloat(coords[1]);
const iconUrl = '8405421.png';
const iconSize = [10, 10];
const customIcon = L.icon({
iconUrl: iconUrl,
iconSize: iconSize
});
const marker = L.marker([lat, lon], { icon: customIcon }).addTo(map);
marker.bindPopup(key);
marker.on('click',function(){
displayInfo(key);
});
}
}
}
Here is my html file :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="map.js"></script>
<script type="module" src="searchbar.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 900px; height: 580px; margin-top: 50px;"></div>
<button id="stopsButton">Show Stops</button>
</body>
</html>
I am not recieving any console errors related to these methods.If someone can let me know why the imports cause the method to not be called that would be a great help.
There are two errors in your code.
1. Files on the web are case-sensitive
You load the file
searchbar.js, but your file is calledsearchBar.js. Small/Big letters might not be important on a Windows PC, but they are important on the web.2. You are loading a named export, but you want the default
When things aren't working as expected, the first thing you want to do is to check the console. You'll see this error:
This is because when you use the curly braces in
import {addStops} from "./map.js";it expects the file to have a named export, but you have a default exportexport default function addStops(stops). This question goes deeper on the differenceThis is an easy fix. Either you change that line to
export function addStops(stops)...or you change the import to
import addStops from "./map.js";(without the curly braces).