Calling a function with an e.preventDefault without an e parameter

Question

I have a function (which has an e parameter) that's fired off in two ways:

Submitting a form;
By changing between two elements.

I have a e.preventDefault() at the end of the function because, otherwise, the page will reload and the asynchronous event onscreen would be disrupted. This doesn't throw any errors when I call the function using the submit event listener. However, when I try using the change event listener, it shows an error of how e isn't defined, and yet still works. When I add an e, the function refuses to work when called with the change event.

Obviously, I could leave it alone because it still works, but I'd still like to know what to do.

Thank you in advance.

Edit for code:

Event Listeners

searchForm.addEventListener("submit", getWeather);

// For the temperature preference
tempSelectForm.addEventListener("change", () => {
  if (celsius.checked) {
    measurement = true;
    getWeather();
  } else if (fahrenheit.checked) {
    measurement = false;
    getWeather();
  }
});

Function:

function getWeather(e) {
  // Data from the search
  const text = search.value;

  weather
    .generateWeather(text, measurement)
    .then((data) => {
      if (data.cod === "404") {
        console.log("No such city found");
      } else if (data.cod === "400") {
        console.log("No city detected");
      } else {
        console.log(data);
        const placeName = data.name + ", " + data.sys.country;
        const currentTemp = Math.floor(data.main.temp);
        const weatherType = data.weather[0].main;
        const weatherDescription = data.weather[0].description;
        const feelsLike = Math.floor(data.main.feels_like);
        const humidity = data.main.humidity;
        const pressure = data.main.pressure;
        const wind = data.wind.speed;

        ui.showWeather(
          measurement,
          placeName,
          currentTemp,
          weatherType,
          weatherDescription,
          feelsLike,
          humidity,
          pressure,
          wind
        );
      }
    })
    .catch((err) => console.error(err));

  e.preventDefault();
}

You'd usually call it first thing, whereas `e` is the event being passed function(e){}. Can you show your code? — Joel Hager, May 26 '20 at 21:36
You can check the event type before calling `preventDefault()` on it. Or remove `e.preventDefault()` from your handler function, set it as `onchange` handler, then use a small function for `onsubmit` that prevents the event, then calls the ajax function. (the real issue is that you seem to never reconsider your premise, i.e. a single function handling both events) edit: you aren't actually doing that... why not use a similar small function for `onsubmit`, and simply prevent the event only in there? — , May 26 '20 at 21:37
You need to edit the question and add some sample code to get clarity on the question. — NikzJon, May 26 '20 at 21:37
You can replace `e.preventDefault()` by `return false`. See for details [here](https://stackoverflow.com/questions/30473581/when-to-use-preventdefault-vs-return-false) — Gerard, May 26 '20 at 21:39
`searchForm.addEventListener("submit", e => { e.preventDefault(); getWeather(); });` (and remove `e.preventDefault();` from `getWeather`) — , May 26 '20 at 21:45

score 0 · Accepted Answer · answered May 26 '20 at 21:40

You need to pass the event parameter from the event listener to getWeather

tempSelectForm.addEventListener("change", (e) => {
  if (celsius.checked) {
    measurement = true;
    getWeather(e);
  } else if (fahrenheit.checked) {
    measurement = false;
    getWeather(e);
  }
});

Calling a function with an e.preventDefault without an e parameter

1 Answers1