生成D&D角色前无法移除现有元素的技术问题求助

看起来你的核心问题出在点击事件绑定错误和cleanUp函数的实现不够健壮这两个地方，导致点击按钮时无法触发清理逻辑，旧的属性图片一直保留。

问题1：点击事件绑定方式错误 #

你当前的代码是这样判断按钮点击的：

let begin = document.getElementById("characterGenerator");
if (begin.onclick){
 cleanUp();
 charCreation();
}

这段代码只会在页面加载时执行一次，而不是在按钮被点击时触发。begin.onclick在这里是检查按钮是否已经绑定了点击事件处理函数，不是用来监听点击动作的——所以你的cleanUp和charCreation根本不会在点击按钮时运行。

问题2：cleanUp函数的潜在问题 #

你的cleanUp函数通过id逐个移除图片，但如果某个id对应的元素不存在（比如第一次点击前没有图片，或者之前的移除操作已经删掉了元素），调用el.remove()会直接抛出错误，导致整个函数中断，后续的清理操作也无法完成。

修正后的完整代码 #

下面是调整后的代码，解决了上述两个问题：

// 补全你原代码中缺失的随机数生成函数
function randNum(arr) {
  return Math.floor(Math.random() * arr.length);
}

function charCreation(){
 let charClass = ['Cleric','Fighter','Rogue','Wizard']
 let charRace = ['Hill Dwarf', 'Mountain Dwarf', 'High Elf','Wood Elf','Lightfoot Halfling', 'Stout Halfling','Human']
 let dd = document.getElementById("ddStatRoll");
 document.getElementById("race").innerHTML = "Race: " + charRace[randNum(charRace)];
 document.getElementById("cls").innerHTML = "Class: " + charClass[randNum(charClass)];
 
 // 先清理旧内容，再生成新内容
 cleanUp();
 
 if (dd.options[dd.selectedIndex].value ==="standard"){
  standardArray()
 } else{
  riskyArray()
 }
}

function standardArray(){
 let i = document.getElementById("startstat")
 i.insertAdjacentHTML('beforeend', '<img src="img/stats/15.png" draggable="true" ondragstart="drag(event)" id="imgdrag1">')
 i.insertAdjacentHTML('beforeend', '<img src="img/stats/14.png" draggable="true" ondragstart="drag(event)" id="imgdrag2">')
 i.insertAdjacentHTML('beforeend', '<img src="img/stats/13.png" draggable="true" ondragstart="drag(event)" id="imgdrag3">')
 i.insertAdjacentHTML('beforeend', '<img src="img/stats/12.png" draggable="true" ondragstart="drag(event)" id="imgdrag4">')
 i.insertAdjacentHTML('beforeend', '<img src="img/stats/10.png" draggable="true" ondragstart="drag(event)" id="imgdrag5">')
 i.insertAdjacentHTML('beforeend', '<img src="img/stats/8.png" draggable="true" ondragstart="drag(event)" id="imgdrag6">')
}

// 改进后的cleanUp函数：直接清空父元素内容，更可靠
function cleanUp(){
 let statContainer = document.getElementById("startstat");
 // 清空容器内的所有元素，避免逐个查找id的麻烦和报错
 statContainer.innerHTML = '';
}

// 正确绑定点击事件：使用addEventListener监听点击动作
let begin = document.getElementById("characterGenerator");
begin.addEventListener('click', charCreation);

关键修改点说明 #

1. 点击事件绑定：改用addEventListener，这样每次按钮被点击时都会触发charCreation函数，这是标准的事件绑定方式。
2. 清理逻辑优化：直接清空startstat容器的innerHTML，不管里面有多少元素，一次性全部清除，既简洁又不会因为元素不存在而报错。
3. 流程调整：在charCreation里先调用cleanUp，再生成新的属性图片，确保旧内容被移除后再添加新内容。

另外，注意你原代码里的riskyArray函数没有给出，记得补充它的实现，逻辑和standardArray类似即可。

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