vanilla js keyup работает, но не отправляет прослушиватель событий для элемента формы - PullRequest
Новая
       8

vanilla js keyup работает, но не отправляет прослушиватель событий для элемента формы

0 голосов
/ 19 января 2020

Пожалуйста, найдите мой код ниже для простого ванильного javascript вызова API погоды для получения данных и отображения на той же странице. Сейчас, пожалуйста, игнорируйте функции debounce и handleInoutText, я жестко кодирую название города для получения данных. 

'use strict';

(function() {
	const inputEl    = document.querySelector(".search-placholder");
	// Get the form element.
	const formEl     = document.querySelector('form.weatherdata-form');
	const currTemp   = document.querySelector('.current-temperature');
	const weather    = document.querySelector('.weather-description');
	const searchBar  = document.querySelector('.search-bar');
	const resultArea = document.querySelector('.result-area');
	let cityName = '';

	const debounce = (func, wait, immediate) => {
		var timeout;
		return function() {
			var context = this, args = arguments;
			var later = function() {
				timeout = null;
				if (!immediate) func.apply(context, args);
			};
			var callNow = immediate && !timeout;
			clearTimeout(timeout);
			timeout = setTimeout(later, wait);
			if (callNow) func.apply(context, args);
		};
	};

	const handleSearchText = debounce((e) => {
			cityName = e.target.value,
			inputEl.placeholder = cityName
	}, 250);

	inputEl.addEventListener("keyup", handleSearchText);
	// make request to openweatherapi & make api call
	const getWeatherdata = function(event) {
		const url = `http://api.openweathermap.org/data/2.5/weather?q=London&appid=2489ed561dc99d173a2f394574bc107e`;
		const response = fetch(url)
			.then(result => result.json())
			.then(data => {
				console.log(data)
				searchBar.style.display = "none";
				resultArea.style.display = "block";
				let k = parseInt(data.main.temp);
				let final = Math.floor(9/5 * (k -273) + 32);
				currTemp.textContent = final;
				weather.textContent = data.weather[0].description;
			});

	}

	formEl.addEventListener('keyup', getWeatherdata);

	// formEl.addEventListener("submit", getWeatherdata);

})();
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My cool weather app</title>
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <main>
    <div class="search-container">
      <div class="search-bar">
        <form class="weatherdata-form">
          <i class="fa fa-search fa-3x" id="icon"></i>
          <input type="text" class="search-placholder" 
                placeholder="Type city to find weather..." 
                name="city-name" />
          <button type="submit">Submit</button>
        </form>
      </div>
      <div class="result-area">
        <span>Weather Today:
          <p class="current-temperature"></p>
        </span>
        <p class="weather-description"></p>
      </div>
    </div>
  </main>
  <script src="index.js"></script>
</body>
</html>

В настоящее время я использую пример названия города для получения данных, но приемник отправки события не работает. Нужно ли мне менять мой html?

1 Ответ

0 голосов
/ 19 января 2020

Это было мое плохо - у меня было событие нажатия на кнопку, которую я не нажимал! Я хотел, чтобы мой код выполнялся при вводе - поэтому я добавил прослушиватель событий при вводе ключа keyup - если keycode был 13, функция выполняется как во фрагменте: 

'use strict';

(function() {
	const inputEl = document.querySelector(".search-placeholder");
	// Get the form element.
	const btnEl = document.querySelector('.btn-submit');
	const currTemp = document.querySelector('.current-temperature');
	const weather = document.querySelector('.weather-description');
	const searchBar = document.querySelector('.search-bar');
	const resultArea = document.querySelector('.result-area');
	let cityName = '';

	const debounce = (func, wait, immediate) => {
		var timeout;
		return function() {
			var context = this, args = arguments;
			var later = function() {
				timeout = null;
				if (!immediate) func.apply(context, args);
			};
			var callNow = immediate && !timeout;
			clearTimeout(timeout);
			timeout = setTimeout(later, wait);
			if (callNow) func.apply(context, args);
		};
	};

	const handleSearchText = debounce((e) => {
		cityName = e.target.value,
		inputEl.placeholder = cityName
	}, 250);

	inputEl.addEventListener("keyup", handleSearchText);
	// make request to openweatherapi & make api call
	const getWeatherdata = function(event) {
		const url = `http://api.openweathermap.org/data/2.5/weather?q=London&appid=2489ed561dc99d173a2f394574bc107e`;
		const response = fetch(url)
			.then(result => result.json())
			.then(data => {
				console.log(data)
				searchBar.style.display = "none";
				resultArea.style.display = "block";
				let k = parseInt(data.main.temp);
				let final = Math.floor(9/5 * (k -273) + 32);
				currTemp.textContent = final;
				weather.textContent = data.weather[0].description;
				const img = new Image();
				img.setAttribute('src', `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`);
				img.setAttribute('class', 'mark');
				resultArea.appendChild(img);
			});
	}

	inputEl.addEventListener('keyup', function(e) {
		if(e.keyCode === 13) {
			getWeatherdata()
		}
	});

})();
.btn-submit {
	display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>My cool weather app</title>
	<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<main>
		<div class="search-container">
			<div class="search-bar">
				<i class="fa fa-search fa-3x" id="icon"></i>
				<input type="text" class="search-placeholder" placeholder="Type city to find weather..." name="city-name"/>
				<button class="btn-submit" type="submit">Submit</button>
			</div>
			<div class="result-area">
				<span>Weather Today:<p class="current-temperature"></p></span>
				<p class="weather-description"></p>
			</div>
		</div>
	</main>
	<script src="index.js"></script>
</body>
</html>

Надеюсь, это кому-нибудь поможет!

...