javascript：使用fetch的动态下拉列表在第一次页面加载事件中不起作用

如何解决javascript：使用fetch的动态下拉列表在第一次页面加载事件中不起作用

LoadPairDropdown();

  function LoadPairDropdown() {
    var markupPair = '';

    fetch("https://api.binance.com/api/v1/exchangeInfo")
      .then((response) => response.json())
      .then((data) => {
        data.symbols.forEach(element => {
          markupPair += '<option id="' + element.symbol + '">' + element.symbol + '</option>';
        });
        document.getElementById("pairs").innerHTML = markupPair;
      })
      .catch((error) => {
        console.error('Error:',error);
        alert(error);
      });
    alert("Alert 1 " + markupPair);

    let symbol = document.getElementById('pairs').value;
    alert("Alert 2"+symbol);
    LoadChart(symbol);
  }

我正在使用获取功能填充drowpdown，该功能将返回正确的数据，但是在页面加载时，警报1和警报2显示空白值。 但是在下拉更改事件中，它显示正确的值。 如何获取页面加载事件中的下拉值，以将其传递给另一个函数。