document.write到当前的HTML页面

我是编程的小老鼠，所以我会很感激你的任何建议，更有知识的人在那里。我正在研究一些网页的javascript，我需要javascript来打印到当前的HTML页面，最好是在我为此设置的div标签中。这是我到目前为止有：document.write到当前的HTML页面

<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>

和我的JS文件：

var studentNumberArray = [50011234, 50, 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'; 
     } 
    } 
}

你要知道，这仅仅是一个基本的框架，所以它不是几乎没有完成，但是这是窃听我的东西它会正确地通过代码并将其打印出来，但结果仅在我的浏览器（铬和Firefox）上持续几分之一秒。任何帮助，将不胜感激。

来源

2012-02-09 vhazon

你是什么意思，它只能持续一秒？ – Bot 2012-02-09 19:17:24

原因是因为您使用表单进行提交。这会导致页面在提交后刷新。所以“持续一秒钟”是因为它显示你想要的，然后提交，然后刷新。使用Kory和Sofian的答案的组合应该有所帮助。 – Ascalonian 2012-02-09 19:33:10

这里有一个更简单/更好的方式来完成你正在尝试做

var students = {}; 

// Add students to object 
students[50011234] = { 'id': '50011234', 'name':"Mike Simpson", 'lastPeriod':"George Washington", 'tardy':0 }; 
students[50] = { 'id': '50', '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>

来源

2012-02-09 19:24:27

谢谢！明白了。 – vhazon 2012-02-09 20:21:31

没问题，别忘了接受答案:) – 2012-02-09 20:22:50

你是什么意思的“结果”？看起来您正在设置innerHTML的div1来一遍又一遍地“测试”。

也许你的意思写

document.getElementById('div1').innerHTML += 'test';

这样做是没有效率的，它是你最好的串接一串，甚至更好，加入一个数组，分配innerHTML之前。

来源

2012-02-09 19:28:08 caleb

为什么你看到的只是一秒钟的一小部分原因是，你实际上是造成了提交。提交是对服务器的完全调用，它将页面返回到其初始状态。为了解决这个问题只是让按钮的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>

来源

2012-02-09 19:29:41

Forms是一种特殊结构，它允许与服务器通信：

当一个表单提交，表单数据通过HTTP请求“POSTED”到服务器。
通常情况下，浏览器会显示为一个新的网页服务器的响应。
形式使用action属性来指定哪个服务器页面应该处理请求
在你的情况下，没有指定action，所以表单发送到当前页面，这相当于刷新页面。这意味着所有的客户端（JavaScript）的变化被消灭，这就是为什么你只看到他们一分一秒。

要达到您想要的结果，改变输入类型从submit到button：

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

理想的情况下，在由代码在服务器上操纵的数据库中存在的学生数据。您的表单将POST请求返回包含所需数据的HTML页面。

参考

HTTP
Forms

来源

2012-02-09 19:30:10 paislee

但结果只持续第二个对我的浏览器（铬和Firefox）的一小部分。

这是因为您正在提交页面，所以页面被刷新。您需要将按钮类型从提交更改为按钮。还要添加一个onclick按钮并调用js函数getId

来源

2012-02-09 19:33:07 kiranvj

document.write到当前的HTML页面

回答

相关问题