After input of:
Number
Text (which to be added in the div elements as text)
Select (Div or Section)
and after clicking on the Create-Button
the given number of divs will appear in the section.
This occur too but like I said all those created div elements disappear afterwards.
I changed the code several time but without any success 🙁
//HTML
<!DOCTYPE html>
<html>
<head lang="de">
<title>Kontaktlistenbeispiel</title>
<link rel="stylesheet" href="mainWeek12Challenge6.css" >
</head>
<body>
<form action="">
<input type="number" name="elements" class="input" placeholder="Number Of Elements" />
<input type="text" name="texts" class="input" placeholder="Elements Text" />
<select name="type" class="input">
<option value="Div">Div</option>
<option value="Section">Section</option>
</select>
<input type="submit" name="create" value="Create" />
<div class="results"></div>
</form>
<script src="main6.js"></script>
</body>
</html>
// JS
const formEl = document.querySelector('form');
const numberInputEl = document.querySelector('input[type="number"]');
const textInputEl = document.querySelector('input[type="text"]');
const resultSection = document.querySelector('.results');
const selectionEle = document.querySelector('select');
const containerEl = document.createElement(selectionEle.value);
containerEl.style.cssText = "display: flex; justify-content: center; gap:10px;";
formEl.addEventListener('submit', constructElements);
function constructElements() {
const containerEl = document.createElement(selectionEle.value);
containerEl.style.cssText = "display: flex; justify-content: center; gap:10px;";
let i = 0;
while(i < parseInt(numberInputEl.value)) {
const currDiv = document.createElement('div');
currDiv.className = 'newDiv';
currDiv.textContent = textInputEl.value;
containerEl.appendChild(currDiv);
i++;
}
resultSection.appendChild(containerEl);
}