点击图片切换src时报错Uncaught TypeError: Cannot set property 'src' of null

这个错误Uncaught TypeError: Cannot set property 'src' of null的核心原因是你在遍历字符串的单个字符，去查找不存在的元素，具体拆解如下：

错误根源 #

你定义的names是一个字符串"1200voc"，而不是包含图片ID的数组。当你执行for (x = 0; x < names.length; x++)时，实际是在遍历这个字符串的每一个字符（比如第一次循环取到"1"，第二次取到"2"，直到最后一个字符"c"）。接着你调用document.getElementById(names[x])，试图查找ID为"1"、"2"这类元素——但你的页面里根本没有这些ID的元素，所以返回null，当你尝试给null设置src属性时，就触发了类型错误。

你的逻辑应该是想：先把所有职业图片恢复成默认未选中状态（不带_s后缀），再把当前点击的图片切换为选中状态（带_s后缀）。那我们需要修正names的定义，同时优化代码的健壮性。

修正后的代码 #

HTML（无需修改，保持原结构） #

<div class="character"> 
  <input id="1200" name="vocation_select" type="radio" value="1200" style="display: none" >
  <label id="label_profesji" for="1200"> 
    <img id="1200voc" onclick="onChange(this.id)" src="engine/images/proffesion/1200voc.png" width="34px" height="34px" style="cursor: pointer" title="Bardock"> 
  </label>
</div>

JavaScript（修复逻辑+优化） #

function onChange(id){
  // 把所有职业图片的ID放在数组里，后续加新职业直接往数组里加就行
  const names = ["1200voc"];
  
  // 循环恢复所有图片的默认状态
  for (let x = 0; x < names.length; x++) {
    const prof = document.getElementById(names[x]);
    // 先判断元素是否存在，避免意外报错
    if (prof) {
      prof.src = `engine/images/proffesion/${names[x]}.png`;
    }
  }
  
  // 切换当前点击图片的状态
  const currentProf = document.getElementById(id);
  if (currentProf) {
    currentProf.src = `engine/images/proffesion/${currentProf.id}_s.png`;
  }
};

额外优化建议 #

• 用const/let替代var：避免变量提升导致的意外问题，也更符合现代JS规范。
• 增加元素存在性检查：就算数组里不小心写错了ID，也不会触发报错，让代码更健壮。
• 使用模板字符串：比传统的字符串拼接更简洁易读，减少拼写错误的概率。

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