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

Question

所以我正在制作一个假期查找器“应用程序”，我想要有一些按钮，当有人单击其国家/地区名称时，它会将国家/地区的值输入到 api 字符串中。

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

我对为什么有点困惑，所以如果您找到解决方案，请解释一下。

  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

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

目前它是在单击任何按钮之前定义的，因此 buttonValue 未定义。因此，即使您的 buttonValue 因单击按钮而发生变化，api 变量也保持不变，即。与国家/地区=未定义。

let countrySelect = document.getElementById('country-select');
let buttonValue;
 
const button = document.querySelectorAll("button").forEach(
    button => button.addEventListener('click', function(e) {
      buttonValue = e.target.value;
      console.log(buttonValue);
    })
  );

// When the button is clicked fetch results
countrySelect.addEventListener('click', function() {
	const api = `https://calendarific.com/api/v2/holidays?&api_key=<api key>&country=${buttonValue}&year=2020`;
	
	console.log(api);
});

#country-select {
  border: 1px solid green;
  color: green;
  display: inline-block;
  cursor: pointer;
}

<button value='uk'>
  UK
</button>

<button value ='us'>
  US
</button>

<div id='country-select'>
  Select Country
</div>