Triggering an event for search box when enter key is pressed or clicking on svg.
I coded twice once for keypress and another for click event. IS there a better approach for such situations?
const locationInputEnter = document.querySelector("#location-search-btn");
const locationInputClick = document.querySelector(".search-btn");
locationInputEnter.addEventListener("keypress", (event) => {
if (event.key === "Enter") {
event.preventDefault();
let cityname = locationInputEnter.value;
locationBasedSearch(cityname);
locationInputEnter.value = ""; // clear input field
}
});
locationInputClick.addEventListener("click", (event) => {
let cityname = locationInputEnter.value;
locationBasedSearch(cityname);
locationInputEnter.value = ""; // clear input field
});
// Location input based search
const locationBasedSearch = async (cityname) => {
const geocodingURL = `http://api.openweathermap.org/geo/1.0/direct?q=${cityname}&limit=${5}&appid=${APIKEY}`;
fetch(geocodingURL)
.then(response => response.json())
.then(response => console.log(response[0], "Helloworld"))
};
const locationInputEnter = document.querySelector("#location-search-btn");
const locationInputClick = document.querySelector(".search-btn");
locationInputEnter.addEventListener("keypress", (event) => {
if (event.key === "Enter") {
event.preventDefault();
let cityname = locationInputEnter.value;
locationBasedSearch(cityname);
locationInputEnter.value = ""; // clear input field
}
});
locationInputClick.addEventListener("click", (event) => {
let cityname = locationInputEnter.value;
locationBasedSearch(cityname);
locationInputEnter.value = ""; // clear input field
});
// Location input based search
const locationBasedSearch = async (cityname) => {
const geocodingURL = `http://api.openweathermap.org/geo/1.0/direct?q=${cityname}&limit=${5}&appid=${APIKEY}`;
fetch(geocodingURL)
.then(response => response.json())
.then(response => console.log(response[0], "Helloworld"))
};
1 Reply
there's a couple of options. I'd probably rewrite the actual function so that it can handle both types of events, and define it outside the addEventListener call.
alternatively, you can abstract the identical part of the two methods:
const locationInputHandler = (event) => {
//your cool function
};
locationInputEnter.addEventListener("keypress", locationInputHandler);
locationInputClick.addEventListener("click", locationInputHandler);
const locationInputHandler = (event) => {
//your cool function
};
locationInputEnter.addEventListener("keypress", locationInputHandler);
locationInputClick.addEventListener("click", locationInputHandler);
const locationInputEnter = document.querySelector("#location-search-btn");
const locationInputClick = document.querySelector(".search-btn");
const mySuperCoolMethod = () => {
let cityname = locationInputEnter.value;
locationBasedSearch(cityname);
locationInputEnter.value = ""; // clear input field
}
locationInputEnter.addEventListener("keypress", (event) => {
if (event.key === "Enter") {
event.preventDefault();
mySuperCoolMethod();
}
});
locationInputClick.addEventListener("click", mySuperCoolMethod);
const locationInputEnter = document.querySelector("#location-search-btn");
const locationInputClick = document.querySelector(".search-btn");
const mySuperCoolMethod = () => {
let cityname = locationInputEnter.value;
locationBasedSearch(cityname);
locationInputEnter.value = ""; // clear input field
}
locationInputEnter.addEventListener("keypress", (event) => {
if (event.key === "Enter") {
event.preventDefault();
mySuperCoolMethod();
}
});
locationInputClick.addEventListener("click", mySuperCoolMethod);