需要將我的document.write放在與點擊按鈕相同的行上嗎？

如果你運行這個測試代碼，你會看到堆疊在按鈕上的日期。我想在一行上輸入日期和按鈕。請記住，這是我第一個使用javascript的測試代碼。需要將我的document.write放在與點擊按鈕相同的行上嗎？

<html> 

<head> 
<script type="text/javascript"> 
<!-- 
var currentTime = new Date() 
var month = currentTime.getMonth() + 1 
var day = currentTime.getDate() 
var year = currentTime.getFullYear() 
document.write("Today's Date" + month + "/" + day + "/" + year) 
//--> 

</script> 
</head> 
<body> 

<form name=myform> 
<input type=button value="add days" onClick="prompt('How many days do you want to add?','5 or 6');"> 
</form> 


</body> 
</html>

來源

2012-05-20 user1324518

http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice – mpm

Don't use document.write。相反，更合適的方法是在頁面上使用的元素：

<script type="text/javascript"> 
    // Build your variables and message 
    var currentTime = new Date(); 
    var month = currentTime.getMonth() + 1; 
    var day = currentTime.getDate(); 
    var year = currentTime.getFullYear(); 
    var msg = document.createTextNode("Date: "+month+"/"+day+"/"+year); 

    // When the body has loaded, set our message 
    document.body.onload = function(){ 
     document.getElementById("todaysDate").appendChild(msg); 
    }; 
</script>

來源

2012-05-20 02:02:45 Sampson

真棒感謝你的幫助 – user1324518

嗯，'innerHTML'也有點眉頭一皺因爲它無效 – Hawken

@Hawken正確。更新我的答案以保持一致。雖然如果我沒有弄錯的話，innerHTML對於獲取*值而言是皺眉，而不是*設置*值。我可能是錯的。 – Sampson

：

<form name="myForm"> 
    <span id="todaysDate"></span> 
    <input type="button" /> 
</form>

在這一點上，你可以用「todaysDate」的ID分配您的日期值的元素

Jonathan說得對，document.write確實從來不是最好的解決方案，除非你正在使用它來測試什麼。

只是這樣做，而不是

<html> 

     <head> 
     <script type="text/javascript"> 
      var currentTime = new Date(); 
      var month = currentTime.getMonth() + 1; 
      var day = currentTime.getDate(); 
      var year = currentTime.getFullYear(); 
      var dateString = "Today's Date " + month + "/" + day + "/" + year; 
      function loadDate(){ 
      document.getElementById('dateSpan').innerHTML = dateString; 
      } 
     </script> 

     </head> 
     <body onload='loadDate()'> 
     <form name=myform> 
      <span id='dateSpan'></span><input type=button value="add days" onclick="promptprompt('How many days do you want to add?','5 or 6')"/> 
     </form> 
     </body> 
    </html>

來源

2012-05-20 02:13:37 dano

哈哈他打敗了我 – dano

原因您最初經歷的重疊是不是在按鈕的上方，但反過來日期字符串的土地（在日期頂部的按鈕土地串）。如果使用的話，應該將document.write（）放在<主體>的正確位置，其輸出與HTML相符合。將它放在<頭>是沒有意義的;你的瀏覽器被這個困惑，並盲目地試圖立即執行它但不更新佈局（顯然，它甚至還沒有初始化），所以後面<正文>（這恰好是按鈕）覆蓋它。

下面是這可能看起來像舊樣式。這是而不是符合當前的最佳實踐編碼標準，並且而不是準確地被仿真。但它可能會讓你更好地瞭解真正發生了什麼。請注意，這顯示了使用「innerHTML」不使用「innerHTML」來初始化表單的方法。它還說明了標記表單域的方法。

我同意不應該在這裏使用「document.write」。它過於僵化（始終在從服務器獲取頁面時執行，但當用戶單擊「後退」按鈕時可能不會執行，並且您的Javascript程序不能用於其他用途，如「重置表單」）。它在很多情況下也會降低性能。

將表單上的所有輸入字段對齊以使它們「非常漂亮」並在整個表單上繪製框都很常見。這樣的事情很容易做到;然而爲了專注於你的問題的範圍，這個例子而不是說明它們。

根本沒有使用getElementById（），通過命名錶單以及表單中的字段，並使用一些特定於瀏覽器的數組mumbo-jumbo訪問它們，曾經有可能（通常）做到這一點。但getElementById（）方法非常簡單，適用於所有瀏覽器，我甚至不會說明它是如何完成的。

使用window.onload =（注意功能名稱是而不是後跟parens中的參數列表）不再是正確的做事方式。我之所以使用它，僅僅是因爲它非常簡短，使讀者能夠專注於真正重要的事情。

<html> 
<head> 
<title>Example of setting a Form Input field</title> 
<script type="text/javascript"> 
function showDefaultDate() { 
     var dateInputField = document.getElementById("dateInputField"); 
     dateInputField.value = provideToday(); 
} 

function provideToday() { 
     var currentTime = new Date(); 
     var month = currentTime.getMonth() + 1; 
     var day = currentTime.getDate(); 
     var year = currentTime.getFullYear(); 
     var dateString = month + "/" + day + "/" + year; 
     return dateString; 
} 

function initializeForm() { 
     showDefaultDate(); 
} 

window.onload = initializeForm; 
</script> 
</head> 
<body> 
<form> 
Today's Date: 
<input type="text" size=" 25" id="dateInputField"> 
<input type="button" value="Miscellaneous Button"> 
<br> 
Another Field: 
<input type="text" size="30"> 
<br> 
<br> 
<input type="submit" value="Click Me When Done" style="margin-left: 20ex;"> 
</form> 
</body> 
</html>

來源

2012-05-20 03:52:36

需要將我的document.write放在與點擊按鈕相同的行上嗎？

回答

相關問題