我想创建动态段落，因此我编写了以下代码。用户单击按钮后，应添加一个新的段落，该段落的innerText是用户的输入。但是我失败了，有人可以帮助我吗？var input = document.querySelector(".input");var btn = document.querySelector("button");var body = document.querySelector("body");btn.addEventListener('click', addParagraph);function addParagraph() { var childELes = body.children; for (var p in childELes) { if (p.tagName === "p") p.remove(); } if (input.value.trim() != "") { var newPara = document.createElement("p"); newPara.innerText = input.value; body.appendChild(newPara); }}<!DOCTYPE html><html><head> <title>test</title></head><body> <form> <p> <label>input：</label> <input type="text" class="input"> <button>add</button> </p> </form></body></html>
3 回答
波斯汪
TA贡献1811条经验 获得超4个赞
您的代码正在运行，但是正在提交表单，这就是为什么动态增加的价值丢失并刷新页面的原因。为了使其按预期工作，您需要使用e.preventDefault();阻止提交表单的方法：
var input = document.querySelector(".input");
var btn = document.querySelector("button");
var body = document.querySelector("body");
btn.addEventListener('click', addParagraph);
function addParagraph(e) {
e.preventDefault();
var childELes = body.children;
for (var p in childELes) {
if (p.tagName === "p")
p.remove();
}
if (input.value.trim() != "") {
var newPara = document.createElement("p");
newPara.innerText = input.value;
body.appendChild(newPara);
}
}
<form>
<p>
<label>input：</label>
<input type="text" class="input">
<button>add</button>
</p>
</form>
有只小跳蛙
TA贡献1824条经验 获得超8个赞
添加type="button"到您的按钮html标签：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form>
<p>
<label>input：</label>
<input type="text" class="input">
<button type="button">add</button>
</p>
</form>
<script type="text/javascript">
var input = document.querySelector(".input");
var btn = document.querySelector("button");
var body = document.querySelector("body");
btn.addEventListener('click', addParagraph);
function addParagraph() {
var childELes = body.children;
for (var p in childELes) {
if (p.tagName === "p")
p.remove();
}
if (input.value.trim() != "") {
var newPara = document.createElement("p");
newPara.innerText = input.value;
body.appendChild(newPara);
}
}
</script>
</body>
</html>
慕尼黑8549860
TA贡献1818条经验 获得超11个赞
您可以添加.preventDefault()以防止button刷新页面。
var input = document.querySelector(".input");
var btn = document.querySelector("button");
var body = document.querySelector("body");
btn.addEventListener('click', addParagraph);
function addParagraph(e) {
e.preventDefault();
var childELes = body.children;
for (var p in childELes) {
if (p.tagName === "p")
p.remove();
}
if (input.value.trim() != "") {
var newPara = document.createElement("p");
newPara.innerText = input.value;
body.appendChild(newPara);
}
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form>
<p>
<label>input：</label>
<input type="text" class="input">
<button>add</button>
</p>
</form>
</body>
</html>
添加回答
举报
0/150
提交
取消