Question

我正在研发D＆amp; D角色生成器。我根据他们决定标准阵列还是风险较高的阵列生成每个统计数字的图像。因为我正在努力学习如何以一种体面的方式编写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);

在重新创建之前删除现有元素

1 个答案: