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

回答

相關問題