输入后: 数字 文本(作为文本添加到 div 元素中) 选择(分区或部分)
单击“创建”按钮后
给定数量的 div 将出现在该部分中。
这种情况也会发生,但就像我说的那样,所有创建的 div 元素随后都会消失。
我多次更改代码但没有成功:(
//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);
}
我不知道你想做什么。可以说具体一点吗?