来自外部的 getElementById 不起作用

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创建成功。但是当我提交时，它只是重置 'firstname' 和 'username' 中的值。如果我只是在 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 不起作用

getElementById from external not working

html

javascript

getelementbyid