JavaScript实现基于API数据的下拉选择地铁站信息查询问题求助

问题原因 #

• Validate 函数定义在fetch的异步回调内部，全局作用域无法访问，导致点击按钮触发事件时找不到函数无响应
• 函数内部使用this.link读取全局变量，此处this指向触发点击的按钮元素，无法正确获取全局定义的link变量，导致请求url拼接错误
• 循环生成站点信息时使用重复的id dataapi，不符合DOM规范，样式设置只能生效第一条
• 站点名称可能包含空格或特殊字符，直接拼接url容易导致请求失败

修正后的代码 #

JS代码（main.js）

var link = 'https://api-ratp.pierre-grimaud.fr/v4/';
var apiStations = "https://api-ratp.pierre-grimaud.fr/v4/stations/metros/8";

// 将Validate函数移到全局作用域
function Validate() {
  var e = document.getElementById("stationmetro");
  var metroselect = e.options[e.selectedIndex].text;
  // 直接调用全局link变量，对站点名编码避免url报错
  var url = link + 'schedules/metros/8/' + encodeURIComponent(metroselect) +'/A+R';
  fetch(url, {
    method: "get"
  })
  .then(response => response.json())
  .then(data => {
    let test= data.result.schedules;
    let dest=''
    for (var i = 0; i < test.length; i++) {
      // 重复元素改用class标识，不要用id
      dest += "<div class='dataapi'> Direction: " + test[i].destination + " <br>Information :" +test[i].message +"<br></div>" 
    }
    document.getElementById("results").innerHTML = dest;
    // 选中所有class为dataapi的元素统一设置样式
    var elements = document.querySelectorAll(".dataapi");
    elements.forEach(el => el.style.backgroundColor = "#00FF00");
  })
}

fetch(apiStations, {
  method: "get"
})
.then(response => response.json())
.then(data => {
  let allstations = data.result.stations;
  let html = '';
  for (var i = 0; i < allstations.length; i++) {
    html += "<option value=" + allstations[i].slug + ">" + allstations[i].name + "</option>"
  }
  document.getElementById("stationmetro").innerHTML = html;
  // 首次加载默认展示第一个站点信息
  Validate();
})

可选CSS补充（可以加在你原有CSS末尾优化展示效果）

.dataapi {
  margin: 8px 0;
  padding: 6px;
  border-radius: 4px;
}

HTML代码无需修改，和你原有版本保持一致即可。

内容的提问来源于stack exchange，提问作者HumDadada