爲什麼Javascript動態HTML5表沒有出現在頁面上

我試圖在將這些不斷更新的值插入到HTML表格中之前，將大量產品乘以價格。爲了示例的目的，我正在使用永久循環來不斷採取措施。爲什麼Javascript動態HTML5表沒有出現在頁面上

<!DOCTYPE html> 
    <html> 

    <head> 
    <meta charset="utf-8"> 

<script> 
<!-- 
var product1 = 0; 
var product2 = 0; 
var product3 = 0; 
var product4 = 0; 
var product5 = 0; 
var productNum = 0; 
var productNumInt = 0; 
var quantitySold = 0; 
var quantitySoldInt = 0; 

document.write("<table>"); 
document.write("<tr><th>Product Number</th><th>Quantity Sold</th></tr>"); 
document.write("<tr><td>1</td><td>$" + product1 + "</td></tr>"); 
document.write("<tr><td>2</td><td>$" + product2 + "</td></tr>"); 
document.write("<tr><td>3</td><td>$" + product3 + "</td></tr>"); 
document.write("<tr><td>4</td><td>$" + product4 + "</td></tr>"); 
document.write("<tr><td>5</td><td>$" + product5 + "</td></tr>"); 
document.write("</table>"); 

while (true) { 
    productNum = window.prompt("Please enter the product number"); 
    quantitySold = window.prompt("Please enter the quantity sold"); 
    productNumInt = parseInt(productNum); 
    quantitySoldInt = parseInt(quantitySold); 

    switch (productNumInt) { 
    case 1: 
     product1 += quantitySoldInt * 2.98; 
     break; 
    case 2: 
     product2 += quantitySoldInt * 4.50; 
     break; 
    case 3: 
     product3 += quantitySoldInt * 9.98; 
     break; 
    case 4: 
     product4 += quantitySoldInt * 4.49; 
     break; 
    case 5: 
     product5 += quantitySoldInt * 6.87; 
     break; 
    } 
} 
// --> 
</script> 
</head> 

<body> 
</body> 

</html>

來源

2017-06-05 hailnick

我想你應該把你的腳本放在身體的盡頭。現在它在您的頁面出現在屏幕上之前運行。

來源

2017-06-05 04:19:40 vZ10

現在它在DOM建成之前運行！ – Alexander

正如@ vZ10所提到的，您需要將腳本放在body標記的末尾。此外，您正在提示用戶在實際呈現表格後填充數據（document.write調用）。嘗試在提示後放置document.write電話

來源

2017-06-05 04:25:20 embarq

您必須在<body>標記結束後（即在</body>之後）編寫腳本。

來源

2017-06-05 04:36:03 mehtasuraj09

首先，你不需要document.write這一部分：

document.write("<table>"); 
document.write("<tr><th>Product Number</th><th>Quantity Sold</th></tr>");

其實，你並不需要在你的情況下使用document.write在所有的，它可以是健康的，以避免它的時候沒有必要。

您可以通過有這個標記爲基礎模型減輕一些疼痛：

HTML

<table> 
    <tr><th>Product Number</th><th>Quantity Sold</th></tr> 
    <tr><td>1</td><td id="product1"></td></tr> 
    <tr><td>2</td><td id="product2"></td></tr> 
    <tr><td>3</td><td id="product3"></td></tr> 
    <tr><td>4</td><td id="product4"></td></tr> 
    <tr><td>5</td><td id="product5"></td></tr> 
</table>

然後，你可以像這樣的東西（腳本是在結束訪問您的領域主體的，或表標記後至少）：

的JavaScript

document.getElementById("product1").innerHTML = "1.00"; 
document.getElementById("product2").innerHTML = "2.00"; 
document.getElementById("product3").innerHTML = "3.00"; 
document.getElementById("product4").innerHTML = "4.00"; 
document.getElementById("product5").innerHTML = "5.00";

更妙的是，你可以創建一個DOM（文檔對象模型）的文本元素並對其進行更新（見DOM reference）：

var product1_text = document.createTextNode("1.00"); 
document.getElementById("product1").appendChild(product1_text); 

// now you can update the value 
product1_text.textContent = "1.50"; // calculated value

我會讓你想想有文本的單元格計算的問題。用你當前的腳本，你將遇到operator + =的問題。請記住，當你得到一個顯示的數字時，你使用一個字符串而不是它所代表的基數。您需要使用功能parseFloat(stringValue)才能達到此目的。

我希望這有幫助，祝你好運。

來源

2017-06-05 04:52:07

爲什麼Javascript動態HTML5表沒有出現在頁面上

回答

相關問題