CODEWITHSUNDEEP
javascripthtmlopenweathermap
Raefiel
Raefiel

Reputation: 5

Why are my JavaScript functions not firing?

I'm working on a weather app that's making an API call to OpenWeather to get weather info (I've added an API key for testing but I will exchange and delete this one later). The problem is, my functions aren't firing. I'm probably just missing the very obvious...

HTML:

<div class="container-small weather">    
  <h1 class="heading-small">Weather</h1>
  <form class="change-location">
    <label for="city">Enter a location and hit enter:</label>
    <input type="text" name="city" class="weather-input">
  </form>

  <div>
    <!-- wrapper -->
    <div id="weather-img">
      <!-- show weatherState image depending on what the weather's like -->
      <!-- js will exchange class 'wimg' with sunny, rainy, etc -->
    </div>

    <!-- output the weather information -->
    <div>
      <div id="description" class="description"></div>
      <h1 id="temp" class="temp"></h1>
      <div id="location" class="location"></div>
    </div>
  </div>
</div>

JS:

const key = 'bd669dc2b57e52ed023580e893a05770';  
// fetch weather information
function weatherBallon(city) {
  console.log('weatherBallon!');
  fetch('https://api.openweathermap.org/data/2.5/weather?q=' + city + '&appid=' + key)
    .then(function(resp) {
      return resp.json()
    }) // Convert data to json
    .then(function(data) {
      //call function to output weather date to the DOM/UI
      drawWeather(data);
      console.log(data);
    })
    .catch(function(err) {
      console.log(err);
    });
}

// output the fetched weather information to the DOM/UI
function drawWeather(d) {
  var celcius = Math.round(parseFloat(d.main.temp) - 273.15);
  var fahrenheit = Math.round(((parseFloat(d.main.temp) - 273.15) * 1.8) + 32);
  var description = d.weather[0].description;

  document.getElementById('description').innerHTML = description;
  document.getElementById('temp').innerHTML = celcius + '&deg;';
  document.getElementById('location').innerHTML = d.name;

  var weatherState = document.querySelector('#weather-img');

  if (description.indexOf('rain') > 0) {
    weatherState.className = 'rainy';
  } else if (description.indexOf('cloud') > 0) {
    weatherState.className = 'cloudy';
  } else if (description.indexOf('sunny') > 0) {
    weatherState.className = 'sunny';
  } else {
    weatherState.className = 'clear';
  }

  // get user input
  const cityInput = document.querySelector('.change-location');
  console.log(cityInput);

  cityInput.addEventListener('submit', e => {
    e.preventDefault();
    let city = cityInput.city.value.trim();
    city = DOMPurify.sanitize(city);
    console.log(city);
    cityInput.reset();

    weatherBallon(city);

  });
}

I think the problem is with the cityInput variable since it returns 'undefined' when I console.log it. But I'm not sure why it's not working. Is my reference to the .change-location input field wrong?

Upvotes: 0

Views: 387

Answers (1)

threeFatCat
threeFatCat

Reputation: 819

cityInput.addEventListener('submit', e => {
    e.preventDefault();
    let city = cityInput.city.value.trim();
    city = DOMPurify.sanitize(city);
    console.log(city);
    cityInput.reset();

    weatherBallon(city)
 }

is inside drawWeather().

Which I think it should be outside.

You should also include outside the getting of element cityInput to avoid undefined error.

Upvotes: 3

Related Questions