Question

我是编程的小伙子，所以我很感谢你那些知识渊博的人的建议。我正在为一个网页开发一些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';
      }
    }
}

请注意，这只是基本框架，所以它还没有完成，但是让我烦恼的是，它会正确地检查代码并将其打印出来，但结果只会持续一小部分。我的浏览器上的第二个（铬和Firefox）。任何帮助将不胜感激。

Answer 1

这是一种更容易/更好的方法来完成你想要做的事情

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>

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

Answer 3

“结果”是什么意思？您似乎一遍又一遍地将innerHTML div1设置为“测试”。

也许你的意思是写

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

执行此操作效率不高，在分配innerHTML之前，最好先连接字符串，甚至更好地连接数组。

Answer 4

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

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

要获得所需结果，请将输入类型从submit更改为button：

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

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

<强>参考

HTTP
Forms

Answer 5

但结果只在我的浏览器上持续了不到一秒钟（chrome和firefox）。

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

document.write到当前的HTML页面

5 个答案: