获取元素ID并绑定点击事件时出现Cannot set property 'onclick' of null错误

嘿，我来帮你搞定这个问题！先拆解下错误原因，再给你两个靠谱的解决方案。

错误原因分析 #

你碰到的Cannot set property 'onclick' of null报错，主要是两个问题导致的：

• 无效的目标元素：当你点击form的空白区域时，e.target不是input文本框，xid会变成空字符串，这时候document.getElementById(xid)返回null，给null赋值onclick自然就报错了。
• 逻辑冗余且颠倒：你本来想实现“点击文本框就清空对应span”，但现在的代码是先触发form的click事件，才给文本框绑定onclick事件——第一次点击文本框根本不会触发deleteSpan，完全绕了弯路。

解决方案1：事件委托（推荐，适合多input场景） #

因为你有多个input和span，用事件委托在form上统一处理最高效，HTML保持不变，修改JS即可：

function getId(e) {
  // 先判断点击的是不是我们要处理的input（ID以tbx_开头）
  if (e.target.tagName === 'INPUT' && e.target.id.startsWith('tbx_')) {
    const xid = e.target.id;
    const spanId = xid.split("_").pop();
    // 直接调用清空方法，不用额外绑定事件
    deleteSpan(spanId);
  }
}

function deleteSpan(spanId) {
  const spanElement = document.getElementById(spanId);
  // 加个判断，避免span不存在时再次报错
  if (spanElement) {
    spanElement.innerHTML = "";
  }
}

为什么这个方案可行？ #

• 利用事件冒泡，form会捕获所有子元素的点击事件，我们只处理符合条件的input（ID以tbx_开头），点击form空白处不会触发逻辑，避免了xid为空的情况。
• 点击input时直接执行清空操作，逻辑更直接，没有冗余的事件绑定步骤。
• 增加了span存在性判断，避免因spanId错误导致的额外报错。

解决方案2：直接给input绑定点击事件（适合少量input场景） #

如果你的input数量不多，也可以直接给每个input绑定点击事件，更直观：

修改后的HTML #

<form>
  <input type="text" name="name" id="tbx_name" onclick="handleInputClick(this)">
  <br>
  <span id="name">测试内容</span>
  <!-- 其他input和span也照此添加onclick -->
</form>

对应的JS #

function handleInputClick(inputElement) {
  const xid = inputElement.id;
  const spanId = xid.split("_").pop();
  deleteSpan(spanId);
}

function deleteSpan(spanId) {
  const spanElement = document.getElementById(spanId);
  if (spanElement) {
    spanElement.innerHTML = "";
  }
}

这个方案直接在input上绑定事件，点击时立刻触发清空逻辑，不需要依赖form的事件冒泡，代码更直白。

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