javascript - 查询用户输入 - API

Question

更聪明！我正在开发一个天气应用程序，但我无法获得用户输入。我尝试创建一个变量并将输入值分配给它并更改它应该是动态的 url 部分。对不起，如果我不是很清楚，我是初学者。但这是我的代码和我的尝试

HTML

<form class="search">
      <input type="text" name="search-city" id="search-city" />
      <button class="search-btn">Search</button>
    </form>

    <div class="container">
      <div class="box">
        <span class="main"></span>
        <span class="name"></span>
        <span class="temp"></span>
        <span class="desc"></span>
        <span class="feel"></span>
        <span class="min"></span>
        <span class="max"></span>
      </div>
      <div class="toggle">
        <input type="checkbox" name="toggle" class="checkbox" id="checkbox" />
        <label for="checkbox" class="label">
          <div class="ball"></div>
          <p>C</p>
          <p>F</p>
        </label>
      </div>
    </div>

JS

const name = document.querySelector('.name');
const temperature = document.querySelector('.temp');
const main = document.querySelector('.main');
const desc = document.querySelector('.desc');
const feel = document.querySelector('.feel');
const minTemp = document.querySelector('.min');
const maxTemp = document.querySelector('.max');
const searchBtn = document.querySelector('.search-btn');

let api = 'http://api.openweathermap.org/data/2.5/weather?q=';
let city = 'Los Angeles';
const API_KEY = '&appid=78f46276c074c96c7cc3e739da828101';

const getWeather = async () => {
  const unit = document.querySelector('.checkbox').value;

  const searchCity = document.querySelector('.search-city');

  let units = `${unit}`;
  let url = api + city + '&units=' + units + API_KEY;

  const response = await fetch(url, { mode: 'cors' });
  const data = await response.json();
  displayWeather(data);
};

searchBtn.addEventListener('click', (e) => {
  e.preventDefault();
});

const displayWeather = async (data) => {
  name.textContent = data.name;
  temperature.textContent = parseInt(data.main.temp) + '°';
  main.textContent = data.weather[0].main;
  desc.textContent = 'Description: ' + data.weather[0].description;
  feel.textContent = 'Feels like: ' + parseInt(data.main.feels_like) + '°';
  console.log(data);
  minTemp.textContent = 'Min: ' + parseInt(data.main.temp_min) + '°';
  maxTemp.textContent = 'Max: ' + parseInt(data.main.temp_max) + '°';
};

const toggleUnit = document.querySelector('.checkbox');
toggleUnit.addEventListener('click', (e) => {
  if (e.target.value === 'imperial') {
    e.target.value = 'metric';
    getWeather();
  } else {
    e.target.value = 'imperial';
    getWeather();
  }
});

getWeather();

我的尝试

const getWeather = async () => {
  const unit = document.querySelector('.checkbox').value;

  const searchCity = document.querySelector('.search-city');
  let searchTem = searchCity.value; // created a variable and assigned the user input to it
  if (!searchTem) {
   searchTerm = 'Detroit';
  }

  let units = `${unit}`;
  let url = api + searchTerm + '&units=' + units + API_KEY; // here I replaced city for that variable I just created

  const response = await fetch(url, { mode: 'cors' });
  const data = await response.json();
  displayWeather(data);
};

searchBtn.addEventListener('click', (e) => {
  e.preventDefault();
});

我很感激任何帮助。我已经为此苦苦挣扎了一天：/谢谢

标签： javascript

Answer 1

您正在input错误地从文档中查询节点。

根据您的代码

const searchCity = document.querySelector('.search-city');

将尝试获取具有 class 的节点search-city。然而，在您的共享代码中，您正在传递一个search-city在input元素上调用的 id。

要解决此问题，请更新您的查询语句

const searchCity = document.querySelector('#search-city');

searchTerm另外，变量的命名有错别字。您正在尝试将输入值分配给名为的变量searchTem，并在您的动态 url 引用变量中命名为searchTerm。

/**
* query all your required element once since this is costly
*
**/

const searchBtn = document.querySelector('.search-btn');
const unit = document.querySelector('.checkbox')
const searchCity = document.querySelector('#search-city');

const api = 'http://api.openweathermap.org/data/2.5/weather?q=';
const city = 'Los Angeles';
const API_KEY = '&appid=78f46276c074c96c7cc3e739da828101';

const getWeather = async () => {

  let searchTerm = searchCity.value; 
  if (!searchTerm) {
   searchTerm = 'Detroit';
  }

  let units = `${unit.value}`;
  
  // here I replaced city for that variable I just created
  let url = api + searchTerm + '&units=' + units + API_KEY; 

  const response = await fetch(url, { mode: 'cors' });
  const data = await response.json();
  displayWeather(data);
};

searchBtn.addEventListener('click', (e) => {
  e.preventDefault();
  
  // call the fetch handling method on submit click
  getWeather(); 
});

<form class="search">
      <input type="text" name="search-city" id="search-city" />
      <button class="search-btn">Search</button>
    </form>

    <div class="container">
      <div class="box">
        <span class="main"></span>
        <span class="name"></span>
        <span class="temp"></span>
        <span class="desc"></span>
        <span class="feel"></span>
        <span class="min"></span>
        <span class="max"></span>
      </div>
      <div class="toggle">
        <input type="checkbox" name="toggle" class="checkbox" id="checkbox" />
        <label for="checkbox" class="label">
          <div class="ball"></div>
          <p>C</p>
          <p>F</p>
        </label>
      </div>
    </div>