document.write на текущую страницу HTML - PullRequest
Новая
       41

document.write на текущую страницу HTML

4 голосов
/ 09 февраля 2012

Я новичок в программировании, поэтому я был бы признателен за любые советы от вас более знающих людей там. Я работаю над небольшим количеством 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). Любая помощь будет оценена.

Ответы [ 5 ]

3 голосов
/ 09 февраля 2012

Вот более простой / лучший способ выполнить то, что вы пытаетесь сделать 

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 голосов
/ 09 февраля 2012

Причина, по которой вы видите это только на долю секунды, заключается в том, что вы действительно вызываете отправку.Передача - это полный обратный вызов на сервер, который возвращает страницу в исходное состояние.Чтобы это исправить, просто вызовите функцию по событию 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 голосов
/ 09 февраля 2012

, но результат длится лишь доли секунды в моих браузерах (Chromium и Firefox).

Это потому, что вы отправляете страницу, поэтомустраница обновляется.Вам нужно изменить тип кнопки на кнопку с отправки.Также добавьте кнопку onclick и вызовите функцию js getId

0 голосов
/ 09 февраля 2012

Forms - это специальная конструкция, которая позволяет осуществлять связь с сервером:

  • Когда форма отправляется, данные формы «ПОСТАВЛЯЮТСЯ» серверу черезHTTP-запрос.
  • Обычно браузер отображает ответ сервера в виде новой веб-страницы.
  • В формах используется атрибут action, чтобы указать, какая страница сервера должна обрабатывать запрос
  • В вашем случае не указывается action, поэтому форма ПОСТАВЛЯЕТСЯ на текущую страницу, что эквивалентно обновлению страницы. Это означает, что все изменения на стороне клиента (JavaScript) были стерты, поэтомувы видите их только в течение доли секунды.

Для достижения желаемого результата измените тип ввода с submit на button: 

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

В идеале, данные об учениках существуют в базе данных, которая обрабатывается кодом на сервере.Ваша форма будет отправлять запрос, который возвращает HTML-страницу, содержащую нужные данные.

Ссылки

0 голосов
/ 09 февраля 2012

Что вы подразумеваете под «результатом»? Похоже, что вы устанавливаете innerHTML из div1 для «проверки» снова и снова.

Возможно, вы хотите написать 

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

Это неэффективно, и желательно, чтобы вы объединяли в строку или, что еще лучше, присоединялись к массиву перед назначением innerHTML.

...