Как добавить значение кнопки сцепления в API

Question

Поэтому я делаю "приложение" для поиска праздников и хочу, чтобы при нажатии на название своей страны кто-то вводил значение страны в строку API.

То, что я сделал, было oop над всеми кнопками и сохраните целевое значение в переменной, которую я затем добавил в 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

Вам необходимо определить / переопределить переменную api в обработчике событий countrySelect.

В данный момент она определяется до нажатия каких-либо кнопок, поэтому buttonValue не определено. Таким образом, даже если ваш buttonValue изменяется в ответ на нажатие кнопок, переменная api остается такой же, как ie. с country=undefined.

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>