如何将连接按钮值添加到api

Question

因此，我正在制作一个假日查找器“应用程序”，我希望有一个按钮，当有人单击其国家的名称时，它将在api字符串中输入该国家的值。

我所做的是循环遍历所有按钮，并将目标值保存到变量中，然后将其连接到api中。问题是，当我在控制台中查看获取的api时，应该在该国家/地区代码中显示“ undefined”。

我有点困惑，为什么找到解决方案，请解释一下。

  let countrySelect = document.getElementById('country-select');
  let holidayName = document.getElementById('holiday-name');
  let holidayDesc = document.getElementById('holiday-desc');
  let holidayDate = document.getElementById('holiday-date');
  let holidayType = document.getElementById('holiday-type');
  let info = document.querySelector('.cell');
  let buttonValue;

  // get button values
    const button = document.querySelectorAll("button").forEach(
      button => button.addEventListener('click', function(e) {
        buttonValue = e.target.value;
        console.log(buttonValue)
      })
    );


// api url
  const api = `https://calendarific.com/api/v2/holidays?&api_key=<api key>&country=${buttonValue}&year=2020`;


// When the button is clicked fetch results
countrySelect.addEventListener('click', function() {
  fetch(api)
  .then(res => res.json())
      .then(data => {

        var apiResponse = data.response;


          console.log(apiResponse);
      }, networkError => {
        alert(networkError)
      })
  })

Answer 1

您需要在api事件监听器中定义/重新定义countrySelect变量。

目前正在单击任何按钮之前已定义，因此buttonValue未定义。因此，即使您的buttonValue响应于单击按钮而更改，api变量仍保持原样，即。用country=undefined。