为什么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表没有出现在页面上

回答

相关问题