So I have this code:
HTML
I want the generated div to be append to the div with class ‘members’
I also have two button: one to generate the div and the other to submit
My console shows me no error but the code won’t just work and it will freeze my browser
Any help??
This is my code
<main>
<div class="members">
</div>
<form>
<button class="addMember" type="button">Add Member <i class="fas fa-plus-square"></i> </button>
<button type="submit" class="submit">Submit</button>
</form>
</main>
JS:
const generateDOM = function(e) {
e.preventDefault();
const memEl = document.createElement('div');
memEl.classList.add("member")
const counter = document.createElement('input');
const num = document.createElement('input');
const mem = document.createElement('select');
let memOpt = document.createElement('option');
const removeButton = document.createElement('button');
// setup the drop-down members
for (let i = 0; i < totalInheritors.length;) {
memOpt.value = totalInheritors[i];
memOpt.text = totalInheritors[i];
memOpt.classList.add('member-name')
mem.appendChild(memOpt);
}
mem.classList.add('member-group')
memEl.appendChild(mem);
// setup the removeButton
removeButton.innerHTML = '<i class="fas fa-trash"></i>';
removeButton.classList.add("trash-btn");
memEl.appendChild(removeButton);
// setup counter attributes
counter.setAttribute('type', 'range');
counter.min = 1;
counter.max = 10;
counter.classList.add('mem-range')
memEl.appendChild(counter);
// setup counter attributes
num.setAttribute('type', 'number');
num.min = 1;
num.max = 10;
num.classList.add('mem-num')
memEl.appendChild(num);
// setting DOM elements
memContainer.appendChild(memEl);
};
Note I wanna generate my options from an array of strings
Go to Source
Author: Truth