CODEWITHSUNDEEP
javascripthtml
Taku_
Taku_

Reputation: 1625

Removing existing elements before recreating them

I am working on a D&D character generator. I have images for each stat number that is generated depending if they decide on a standard array or a riskier array. As I am trying to learn how to program javascript in a decent manner as I am doing this by coding unobtrusively. However I cannot get my elements to remove and recreate. whether I embed the cleanUp function in other places has no effect on the code. the bottom code is the code I have in my JS file after all the functions to not have a onClick in my submit button.

Any help in learning or understanding my process would help

<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();

}

Upvotes: 0

Views: 75

Answers (1)

Taku_
Taku_

Reputation: 1625

I have solved this case. I thought I didn't need to create an event listener. I thought the way I had coded this was sort of something like that. So the bottom half of my statement looked like this 

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

its a good thought but the onclick didn't actually work. Here is the solution and it works since the cleanUp and charCreation functions point to the correct ids

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

Upvotes: 1

Related Questions