页面加载调用getPlatforms时触发Uncaught (in promise) TypeError问题排查

页面加载时会调用getPlatforms函数填充第一个下拉框，在该函数内部调用ClearOptionsFast清空另外两个下拉框时，触发如下错误：

Uncaught (in promise) TypeError: document.getElementById(...) is null

已确认页面源码中对应元素（如下代码）确实存在，请问问题出在哪里？

<select name="label_select" id="label_select">
</select>

完整代码 #

HTML #

<h1 style="text-align: center;">Unified Performance Heat Map</h1>
<hr>
<form name="device_form" id="device_form">
  <label>Choose a device:</label>
  <select name="device_select" id="device_select" onchange="getLabelsBaselines(this.value);">
  </select>
</form>
<br>
<br>
<label>Select the label:</label>
<select name="label_select" id="label_select">
</select>
<br>
<br>
<label>Select the baseline:</label>
<select name="baseline_select" id="baseline_select">
</select>
<br>
<br>
<label>Select the features:</label>
<br>

<br>
<input type="button" onclick='selects()' value="Select All" />
<input type="button" onclick='deSelect()' value="Deselect All" />

<br>
<br>
<button type="button">Make Heat Map !</button>
<hr>
<table style="width:100%">
  <tr>
    <td>FEATURE</td>
    <td colspan="3" style="text-align: center;">IPSEC</td>
  </tr>
  <tr>
    <td>PACKET</td>
    <td>64</td>
    <td>IMIX</td>
    <td>1400</td>
  </tr>
  <tr>
    <td>BASE</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>LABEL</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>HEATMAP</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

CSS #

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

JavaScript #

function ClearOptionsFast(id) {
  alert("func");
  document.getElementById(id).innerHTML = "";
}
async function getPlatforms() {
  const response = await fetch(
    'http://10.64.127.94:5000/api/get_platforms', {
      method: 'POST',
    }
  );
  const jdata = await response.json();
  ldata = jdata["final_result"]
  var selectElement = document.getElementById('device_select');
  selectElement.appendChild(new Option("SELECT", "SELECT")).cloneNode(true)
  for (var i = 0; i < ldata.length; i++) {
    selectElement.appendChild(new Option(ldata[i], ldata[i])).cloneNode(true)
  }
  ClearOptionsFast(document.getElementById("label_select"))
  ClearOptionsFast(document.getElementById("baseline_select"))
}
window.onload = getPlatforms;

async function getLabels(device) {
  var response = await fetch(
    'http://10.64.127.94:5000/api/get_labels', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
      },
      body: JSON.stringify({
        "device": device
      })
    }
  );
  var jdata = await response.json();
  ldata = jdata["final_result"]
  var selectElement = document.getElementById('label_select');
  selectElement.appendChild(new Option("SELECT", "SELECT")).cloneNode(true)
  for (var i = 0; i < ldata.length; i++) {
    selectElement.appendChild(new Option(ldata[i], ldata[i])).cloneNode(true)
  }
}

async function getBaselines(device) {
  var response = await fetch(
    'http://10.64.127.94:5000/api/get_baselines', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
      },
      body: JSON.stringify({
        "device": device
      })
    }
  );
  var jdata = await response.json();
  ldata = jdata["final_result"]
  var selectElement = document.getElementById('baseline_select');
  selectElement.appendChild(new Option("SELECT", "SELECT")).cloneNode(true)
  for (var i = 0; i < ldata.length; i++) {
    selectElement.appendChild(new Option(ldata[i], ldata[i])).cloneNode(true)
  }
}

function getLabelsBaselines(device) {
  getLabels(device);
  getBaselines(device);
}

function selects() {
  var ele = document.getElementsByName('chk');
  for (var i = 0; i < ele.length; i++) {
    if (ele[i].type == 'checkbox')
      ele[i].checked = true;
  }
}

function deSelect() {
  var ele = document.getElementsByName('chk');
  for (var i = 0; i < ele.length; i++) {
    if (ele[i].type == 'checkbox')
      ele[i].checked = false;
  }
}

核心问题 #

你调用ClearOptionsFast时传参错误：

• ClearOptionsFast函数定义里接收的是元素ID字符串，但你实际传的是document.getElementById("label_select")返回的DOM元素对象。
• 当函数内部执行document.getElementById(id)时，相当于把DOM对象当作ID去查找，自然找不到对应元素，返回null进而报错。

修复步骤 #

1. 修改getPlatforms里的调用代码，直接传元素ID字符串：

// 原错误代码
// ClearOptionsFast(document.getElementById("label_select"))
// ClearOptionsFast(document.getElementById("baseline_select"))

// 修复后
ClearOptionsFast("label_select")
ClearOptionsFast("baseline_select")

2. （可选）优化ClearOptionsFast函数，增加空值判断避免后续类似错误：

function ClearOptionsFast(id) {
  const element = document.getElementById(id);
  if (element) {
    element.innerHTML = "";
  } else {
    console.warn(`元素ID ${id} 未找到`);
  }
}

额外建议 #

• 全局变量ldata未用var/let/const声明，会挂载到全局作用域，建议加上let或const避免污染全局环境。
• appendChild后调用cloneNode(true)是多余的，appendChild本身会把元素添加到DOM中，可直接写成selectElement.appendChild(new Option(ldata[i], ldata[i]))。

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