Question

我在提交表单后试图隐藏div，但没有成功。所以，我想知道使用外部js文件时创建div的流程。请考虑以下代码：

HTML：

<!DOCTYPE html>
<html>
<head>
  <title>hello</title>
  <link rel="stylesheet" type="text/css" href='style.css'></link>
</head>
<body>
  <script src='external.js'></script>
</body>
</html>

external.js：

div1 = document.createElement("div");
div1.setAttribute('id', 'banana');
div1.innerHTML="<form id='form1' method='post' onsubmit='changeScreen()'> firstname: <input type='text'  name='firstname' value='' /> <br> surname:<input type='text' name='surname' value='' /> <br> <input type='submit' id='button2' name='submit2' value='login'/></form>";
document.body.appendChild(div1);


function changeScreen(){

    document.getElementById('banana').style.display='none';   
}

（我想练习从外部js文件创建元素，所以这就是html看起来像这样的原因，我根本不想改变它。）

div成功创建。但是当我提交时，它只是重置了＆＃39; firstname＆＃39;和＆＃39;用户名＆＃39; 。如果我只是在changeScreen()中添加一些警报，则会显示它们。 tnx提前提出任何想法（我也为可怜的英语道歉）！

Answer 1

这是因为您的表单发布到相同的URL，与刷新相同。要在提交后保持同一页面，请在代码中添加return false;。

div1 = document.createElement("div");
div1.setAttribute('id', 'banana');
div1.innerHTML="<form id='form1' method='post' onsubmit='return changeScreen();'> firstname: <input type='text'  name='firstname' value='' /> <br> surname:<input type='text' name='surname' value='' /> <br> <input type='submit' id='button2' name='submit2' value='login'/></form>";
document.body.appendChild(div1);
function changeScreen(){

    document.getElementById('banana').style.display='none';   

    return false;
}

来自外部的getElementById不起作用

1 个答案: