Question

这是我目前的代码。当我点击按钮批准.... html heya变为fred flinstone，但在2秒后再次回到heya。为什么这样？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript" type="text/javascript">
function button()
{
    var a = document.getElementById('approve');
    document.getElementById('p').innerHTML= 'Fred Flinstone';
}
</script>

<body>
<form>
<p id="p">heya</p>
<input type="submit" id='approve' value="approve" onclick="button()"/>
<input type="submit" id="reject" value="reject"/>
</form>

</body>
</html>

感谢。

Answer 1

这是因为提交按钮会导致页面重新加载，从而有效地撤消对DOM的更改。

如果您将输入元素的类型更改为“按钮”而不是“提交”，它将正常工作。

<input type='button' id='approve' value='approve' onclick='button()'/>

请注意，执行此操作时，按钮将不再发布表单。如果这就是您想要的，那么您将需要在服务器端安装代码来修改呈现的页面以反映您的更改。

Answer 2

这也有效：

<input type="submit" id='approve' value="approve" onclick="button(); return false;"/>

为什么这个innerhtml的东西会回来？

2 个答案: