API 中未反映分配给按钮点击功能的变量

Question

我有两个按钮可以在城市之间切换天气 API。

当我分配要通过按钮点击确定的变量时：

TButton.addEventListener("click", TWeather);

function TWeather(){
    outputDiv.style.display = "block";
    const buttonCity = "Toronto";
};

API 的 URL 无法识别它。

    const url = "https://api.openweathermap.org/data/2.5/weather?q=" + buttonCity + "&appid=" + myAPIkey + "&units=metric";

如果我在按钮函数之外设置变量，它会起作用。

Answer 1

我认为 const 是局部变量而不是全局变量。在函数外的 addEventListener 之后定义你的变量并试一试。

Answer 2

问题是您在 TWeather 函数中定义了 buttonCity 变量，因此该变量仅在该函数的范围内可用。请阅读以下内容：https://www.w3schools.com/js/js_scope.asp

您必须将此变量分配给其他函数也可以访问的地方。

示例：

let currentCity = '';

TButton.addEventListener("click", TWeather);

function TWeather(){
    outputDiv.style.display = "block";
    currentCity = "Toronto";
};

然后API呼叫：

const url = "https://api.openweathermap.org/data/2.5/weather?q=" + currentCity + "&appid=" + myAPIkey + "&units=metric";

Answer 3

您没有指定要用 URL 做什么，所以我只是做了一个 console.log。

在这里，我创建了一个对象并添加了一些属性，包括一些用于添加事件处理程序的函数。我还将目标城市作为数据属性添加到每个按钮，然后在事件处理程序中将其拉出。

这可能有点矫枉过正，但确实说明了一些避免全局变量的方法，并使它可以在不更改任何代码的情况下向 HTML 添加更多按钮。

var myapp = {
  url: {
    base: "https://api.openweathermap.org/data/2.5/weather?q=",
    api: "&appid=",
    unit: "&units=metric"
  },
  apiKey = "key",
  baseSelector:".weather-toggle",
  buttons: {},
  init: function() {
    const app = this;
    this.buttons = document.querySelectorAll(this.baseSelector);
    this.buttons.forEach(function(button, index, buttons) {
      button.addEventListener("click", this.toggleWeather, false);
    },this);
  },
  toggleWeather: function(event) {
    const targetCity = event.target.dataset.targetCity;
    const url = myapp.url.base + targetCity + myapp.url.api + myapp.apiKey + myapp.url.unit;
    console.log(url);
  }
};

myapp.init.apply(myapp);

<button class="weather-toggle" type="button" data-target-city="Toronto">Toronto</button>
<button class="weather-toggle" type="button" data-target-city="NewYork">New York City</button>
<button class="weather-toggle" type="button" data-target-city="Boston">Boston</button>

Answer 4

你可以尝试把你的 xhr.open 和 send 放在你的两个按钮函数中。记住 url 为 xhr.open 应该分配位置。希望这有效。干杯！

API 中未反映分配给按钮点击功能的变量

Variable assigned to button click function not reflected in API

javascript

weather-api