logo标签列表

将内容使用document.write写入当前HTML页面

javascripthtmlgetelementbyiddocument.write
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';
      }
    }
}

请注意，这只是基本框架，所以还远未完成，但令我困扰的是它可以正确地遍历代码并将其打印出来，但结果在我的浏览器（Chromium和Firefox）上仅持续一小部分时间。欢迎任何帮助。

你的意思是它只持续了一秒钟？ - Bot
原因是因为您正在使用表单进行提交。这会导致在提交后刷新页面。所以“持续一秒钟”的原因是因为它显示您想要的内容，然后提交，然后刷新。结合使用Kory和Sofian的答案应该会有所帮助。 - Ascalonian
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>
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>
0

“result”是什么意思？看起来你一遍又一遍地将div1的innerHTML设置为“test”。

也许你的意思是写成：

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

这样做不够高效，最好的方法是在分配 innerHTML 之前将字符串连接或更好地加入数组。

0

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

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

要实现所需的结果，请将输入类型从 submit 更改为 button：

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

理想情况下，学生数据存在于由服务器上的代码操作的数据库中。您的表单将POST一个请求，返回包含所需数据的HTML页面。
参考资料：
- HTTP - Forms
0
但是在我的浏览器（Chromium和Firefox）中，结果只持续了几分之一秒。这是因为您正在提交页面，所以页面会刷新。您需要将按钮类型从“submit”更改为“button”。还要在按钮上添加一个onclick事件，并调用js函数getId。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接