5

我是编程的菜鸟，所以我很感激你那里更有知识的人的任何建议。我正在为网页编写一些 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>

和我的 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';
      }
    }
}

请注意，这只是基本框架，所以还没有完成，但困扰我的是它会正确地检查代码并将其打印出来，但结果只持续了几分之一秒我的浏览器（铬和火狐）。任何帮助，将不胜感激。

4

5 回答 5

3

这是完成您正在尝试做的事情的更简单/更好的方法

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>
于 2012-02-09T19:24:27.180 回答
2

您仅在几分之一秒内看到它的原因是您实际上正在导致提交。提交是对服务器的完整回调，它将页面返回到其初始状态。要解决此问题，只需在按钮的 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-09T19:29:41.170 回答
0

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

也许你的意思是写

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

这样做效率不高，最好在分配innerHTML.

于 2012-02-09T19:28:08.507 回答
0

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

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

要达到您想要的结果，请将输入类型从更改submit为button：

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

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

参考

于 2012-02-09T19:30:10.887 回答
0

但结果在我的浏览器（铬和火狐）上只持续了几分之一秒。

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

于 2012-02-09T19:33:07.823 回答