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

因此，我正在制作一个假日搜索“应用程序”，我希望有一些按钮，当有人点击他们国家的名称时，它会将国家的值输入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)
      })
  })

let countrySelect=document.getElementById（'country-select'）；
让holidayName=document.getElementById（'holiday-name'）；
让holidayDesc=document.getElementById（'holiday-desc'）；
让holidayDate=document.getElementById（'holiday-date'）；
让holidayType=document.getElementById（'holiday-type'）；
let info=document.querySelector（'.cell'）；
让按钮有价值；
//获取按钮值
const button=document.queryselectoral（“按钮”）.forEach(
button=>button.addEventListener（'click'，函数（e）{
按钮值=e.target.value；
console.log（按钮值）
})
);
//api url
常量api=`https://calendarific.com/api/v2/holidays?&api_key=&country=${buttonValue}&year=2020`；
//单击按钮时，获取结果
countrySelect.addEventListener（'单击'，函数（））{
获取（api）
.then（res=>res.json（））
。然后（数据=>{
var apiResponse=data.response；
控制台日志（apiResponse）；
}，networkError=>{
警报（网络错误）
})
})

您需要在

countrySelect

事件侦听器中定义/重新定义

api

变量

目前，它是在单击任何按钮之前定义的，因此

buttonValue

是未定义的。因此，即使您的

buttonValue

随着按钮被点击而改变，

api

变量仍保持原样，即

country=undefined

let countrySelect=document.getElementById（'country-select'）；
让按钮有价值；
const button=document.queryselectoral（“按钮”）.forEach(
button=>button.addEventListener（'click'，函数（e）{
按钮值=e.target.value；
控制台日志（按钮值）；
})
);
//单击按钮时，获取结果
countrySelect.addEventListener（'单击'，函数（））{
常量api=`https://calendarific.com/api/v2/holidays?&api_key=&country=${buttonValue}&year=2020`；
控制台日志（api）；
});
#国家/地区选择{
边框：1px纯绿色；
颜色：绿色；
显示：内联块；
光标：指针；
}

英国
美国
选择国家
@CertainPerformance抱歉，我对您的回答有点困惑。我想获得点击按钮的值（其中包含国家值），然后将其添加到我的api密钥中，这样它就可以根据国家返回假日。记录整个对象有什么帮助？我只是有点困惑。抱歉。@Nick您能给出一个呈现的
HTML
的示例吗？或者您能检查
按钮
元素是否确实设置了
值
属性吗。如果
按钮
元素没有
值
属性，它将返回
未定义的
@NewToJS确保以下按钮：
加拿大美国墨西哥
@CertainPerformance No.当我控制台记录按钮值并单击按钮返回值。虽然当我把它添加到我的api密钥时，它显示为未定义。谢谢你帮助解决我的问题。在单击按钮之前，您对api的定义是正确的。非常感谢。