Dan*_*hoi 6 html javascript dom onclick onsubmit
<!DOCTYPE html>
<html>
<head>
</head>
<script>
function removeP2() {
var parent = document.getElementById("section");
var child = document.getElementById("p2");
parent.removeChild(child);
}
</script>
<body>
<nav>
<form>
<button onclick="removeP2();">Remove</button>
</form>
</nav>
<section id="section">
<p id="p1">Paragraph One.</p>
<p id="p2">Paragraph Two.</p>
</section>
</body>
</html>
当我单击提交按钮时,该函数照常执行,但在函数执行后,页面重新加载(删除P2一秒钟).
我找到了一个解决方案,即删除"nav"标签内的"Form",它工作正常.只是想问一下问题是什么原因,如果我需要在"nav"标签内加上"Form"标签,我需要修复哪一部分？
Raj*_*ddy 16
表单已提交,您的页面已重新加载.您需要停止表单提交.
解决方案1:type向按钮添加属性.
<button type="button" onclick="removeP2();">Remove</button>
这将确保按钮不是submit类型(当未指定类型时,这是表单标记内按钮的默认类型),并且单击时不提交表单.
解决方案2:在javascript中阻止Submit事件.所以做出这些改变.
<button onclick="removeP2(event);">Remove</button>
并在脚本中阻止此事件
function removeP2(event) {
event.preventDefault(); // prevent the event , ie form submit event
var parent = document.getElementById("section");
var child = document.getElementById("p2");
parent.removeChild(child);
}
解决方案3:我在HTML中看不到表单标签的任何需要.如果它是您的确切语法,并且您实际上没有表单提交的任何其他元素或目的,那么您可以删除form标记.
<nav>
<button onclick="removeP2();">Remove</button>
</nav>
| 归档时间： |
|
| 查看次数： |
8633 次 |
| 最近记录： |