Question

请在下面找到我的代码，以进行简单的普通javascript Weather 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>

我目前使用示例城市名称来获取数据，但是Submit Event侦听器不起作用。我需要更改我的html吗？

Answer 1

这很糟糕-我在未点击的按钮上发生了点击事件！我希望我的代码在enter上运行-因此我在输入元素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>

希望这对某人有帮助！

vanilla js“ keyup”有效，但表单元素上的“ submit”事件侦听器无效

1 个答案: