javascript从输入表单创建div或section

Question

我有一个表单，我输入元素的数量，然后文本，然后类型div或section然后点击创建我应该删除旧的div或section并创建新的

/*get the number of element the text and the type*/
let element = document.querySelector("[name='elements']");
let text = document.querySelector("[name='texts']");
let type = document.querySelector("[name='type']");
let result = document.querySelector(".results");
document.forms[0].onsubmit = function (e) {
let validElement = false;
let validText = false;
let validType = false;
document.querySelectorAll(".results .box").forEach((box) => box.remove());
if (element.value !== "" && text.value !== "" && type.value !== "" && element.value > 0) {

for (let i = 0; i < element.value; i++) {

myBox = document.createElement(type.value);

myBox.className = "box";
myBox.id = `id-${i+1}`;
myBox.title = "Element";

myText = document.createTextNode(text.value);

myBox.appendChild(myText);
result.appendChild(myBox);
}

validElement = true;
validText = true;
validType = true;
}
if (validElement === false || validText === false || validType === false) {
e.preventDefault();
}
};

<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" />
</form>
<div class="results"></div>

问题是div或section出现，但很快消失，我正在检查字段是否为空，如果字段元素号>然后创建应该出现在结果中的元素div

我该如何解决这个问题

Answer 1

你的代码的问题是，你没有阻止<form>刷新页面。

if (validElement === false || validText === false || validType === false) {
e.preventDefault();
}

您使用上面的if语句来防止<form>的默认行为，但是您在创建元素后将所有这些变量设置为true。

validElement = true;
validText = true;
validType = true;

所以你的脚本基本上是创建元素，然后表单刷新页面。

将e.preventDefault();移出if块可以解决当前的问题。

无论用户是否输入了有效的数据，我个人都会调用e.preventDefault();，因为在这两种情况下，页面刷新似乎都是不必要的。

关于如何清除结果栏，这里有一篇详细的文章描述了几种方法。

/*get the number of element the text and the type*/
let element = document.querySelector("[name='elements']");
let text = document.querySelector("[name='texts']");
let type = document.querySelector("[name='type']");
let result = document.querySelector(".results");
document.forms[0].onsubmit = function (e) {
let validElement = false;
let validText = false;
let validType = false;
document.querySelectorAll(".results .box").forEach((box) => box.remove());
if (element.value !== "" && text.value !== "" && type.value !== "" && element.value > 0) {
// Clear the Results Container
while (result.firstChild) {
result.removeChild(result.lastChild);
}
// Repopulate the Results Container
for (let i = 0; i < element.value; i++) {

myBox = document.createElement(type.value);

myBox.className = "box";
myBox.id = `id-${i+1}`;
myBox.title = "Element";

myText = document.createTextNode(text.value);

myBox.appendChild(myText);
result.appendChild(myBox);
}

validElement = true;
validText = true;
validType = true;
}
e.preventDefault();
};

<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" />
</form>
<div class="results"></div>