javascript - 在重新创建现有元素之前删除它们

Question

我正在开发 D&D Angular 色生成器。我有每个统计数字的图像，这些统计数字取决于他们决定使用标准阵列还是风险较高的阵列。当我试图学习如何以适当的方式编写 JavaScript 时，我通过不引人注目的编码来做到这一点。但是我无法删除和重新创建我的元素。我是否在其他地方嵌入 cleanUp 函数对代码没有影响。底部代码是我的 JS 文件中的代码，在所有函数之后，我的提交按钮中没有 onClick。

任何有助于学习或理解我的流程的帮助都会有所帮助

<button type="button" value="click" id="characterGenerator">Generate Character</button>


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)];
    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">')

}

function cleanUp(){
    let imgCount = document.getElementsByTagName('img').length;
    if (imgCount > 0){
        for (let i =1; i <= 6; i++){
            let el = document.getElementById('imgdrag'+i);
            el.remove();
            }   
    }

}

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

}

Answer 1

这个案子我已经解决了。我认为我不需要创建事件监听器。我认为我编码的方式有点像那样。所以我的声明的下半部分看起来像这样

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

这是一个好主意，但 onclick 实际上并没有起作用。这是解决方案，它可以工作，因为 cleanUp 和 charCreation 函数指向正确的 ID

let begin = document.getElementById("characterGenerator")
begin.addEventListener('click',cleanUp);
begin.addEventListener('click',charCreation);