Javascript document.write到当前HTML页面_Javascript_Html_Getelementbyid_Document.write

Javascript document.write到当前HTML页面

javascript html

Javascript document.write到当前HTML页面,javascript,html,getelementbyid,document.write,Javascript,Html,Getelementbyid,Document.write,我是一个编程高手，所以我非常感谢你们这些更有知识的人给我的建议。我正在为一个网页编写一点javascript，我需要将javascript打印到当前的HTML页面，最好是在为此目的而设置的div标记中。以下是我目前掌握的情况： <html> <head> <title>Tardy Reporting</title> <script src="students.js" type="text/javascript"> </script

我是一个编程高手，所以我非常感谢你们这些更有知识的人给我的建议。我正在为一个网页编写一点javascript，我需要将javascript打印到当前的HTML页面，最好是在为此目的而设置的div标记中。以下是我目前掌握的情况：

<html>
<head>
<title>Tardy Reporting</title>
<script src="students.js" type="text/javascript">
</script>
</head>
<body>

<h1>Scan in Student ID</h1>
<form method="POST" name="idForm" onSubmit="getId(parseInt(document.idForm.studentId.value));">
<input type="text" name="studentId" id="studentId"/>
<input type="Submit" name="Submit" />
</form>
<div id="div1"></div>
<p>
</body>
</html>


迟报
扫描学生ID

和我的JS文件：

var studentNumberArray = [50011234, 50012345, 50013456];
var studentNameArray = ["Mike Simpson", "Greg Pollard", "Jason Vigil"];
var studentLastPeriodArray = ["George Washington", "Darth Vadar", "Obi Wan Kenobi"];
var tardyArray = [0, 0, 0];

function getId(studentId) {
  for (i = 0; i < studentNumberArray.length; i++){
    if(studentId === studentNumberArray[i]){   
          tardyArray[i] += tardyArray[i] + 1;
            document.getElementById('div1').innerHTML='test';
      }
    }
}

var studentNumberArray=[500112345001234550013456]；
var studentNameArray=[“迈克·辛普森”、“格雷格·波拉德”、“杰森·维吉尔”]；
var studentLastPeriodArray=[“乔治·华盛顿”、“达斯·瓦达尔”、“欧比-万·克诺比”]；
var tardyArray=[0,0,0]；
函数getId（studentId）{
对于（i=0；i


请注意，这只是一个基本的框架，所以它还没有完成，但困扰我的是，它会正确地检查代码并打印出来，但在我的浏览器（Chrome和firefox）上，结果只会持续几秒钟。任何帮助都将不胜感激。
这里有一个更简单/更好的方法来完成您想要做的事情
var students = {};

// Add students to object
students[50011234] = { 'id': '50011234', 'name':"Mike Simpson", 'lastPeriod':"George Washington", 'tardy':0 };
students[50012345] = { 'id': '50012345', 'name':"Greg Pollard", 'lastPeriod':"Darth Vadar", 'tardy':0 };
students[50013456] = { 'id': '50013456', 'name':"Jason Vigil", 'lastPeriod':"Obi Wan Kenobi", 'tardy':0 };


function getId(studentId) {

  students[ studentId ].tardy += 1;
  document.getElementById('div1').innerHTML='test';
}

此外，如下文所述，如果您不打算提交，则应将按钮更改为“不提交”：
<form method="POST" name="idForm">
    <input type="text" name="studentId" id="studentId"/>
    <input type="button" onclick="getId(parseInt(document.idForm.studentId.value));" name="Mark Tardy" />
</form>


你所说的“结果”是什么意思？似乎您正在反复将div1
的innerHTML
设置为“test”
也许你是想写信
document.getElementById('div1').innerHTML += 'test';

这样做效率不高，最好是在指定innerHTML
之前连接字符串，或者更好地连接数组。之所以只看到一小部分时间，是因为您实际上导致了提交。submit是对服务器的完全回调，它将页面返回到初始状态。
要解决此问题，只需在按钮的onclick事件上调用函数：
<html>
<head><title>Tardy Reporting</title>
    <script src="students.js" type="text/javascript"> </script>
</head>
<body>
    <h1>Scan in Student ID</h1>
    <form method="POST" name="idForm" >
    <input type="text" name="studentId" id="studentId" />
    <input type="button" onclick="getId(parseInt(document.idForm.studentId.value));" value="submit"  />
    </form>
    <div id="div1"></div>
    <p>
</body>
</html> 


迟报
扫描学生ID

表单是一种允许与服务器通信的特殊构造：

<input type="button" onclick=".." value="submit"  />


提交表单时，表单数据通过HTTP请求“发布”到服务器
通常，浏览器会将服务器的响应显示为新网页
表单使用action
属性指定哪个服务器页面应处理请求
在您的情况下，没有指定操作
，因此表单将发布到当前页面，这相当于刷新页面。这意味着所有客户端（JavaScript）更改都将被删除，这就是为什么您只能在一瞬间看到它们

要获得所需结果，请将输入类型从提交更改为按钮：

<input type="button" onclick=".." value="submit"  />



理想情况下，学生数据存在于由服务器上的代码操作的数据库中。表单将发布一个请求，返回包含所需数据的HTML页面
参考资料




但在我的浏览器（chromium和firefox）上，结果只持续了几分之一秒
这是因为您正在提交页面，因此页面将被刷新。您需要将按钮类型从submit更改为button。另外，在按钮上添加一个onclick，并调用js函数getId
它只持续一秒钟是什么意思？原因是您正在使用表单提交。这会导致页面在提交后刷新。所以“持续一秒钟”是因为它显示您想要的内容，然后提交，然后刷新。结合使用Kory和Sofian的答案应该会有所帮助。