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

Jochem•16mo ago

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.

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);

alternatively, you can abstract the identical part of the two methods:

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);

Gaming

Programming

Triggering an event for search box when enter key is pressed or clicking on svg.