為什么Javascript動態HTML5表未顯示在頁面上

Question

在將這些不斷更新的值插入到HTML表中之前，我試圖獲取一定數量的產品並將其乘以價格。 為了示例，我正在使用一個永遠循環來不斷獲取輸入。

    <!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>

Answer 1

如@ vZ10所述，您需要將腳本放在body標簽的末尾。 另外，您還提示用戶在實際渲染表后填充數據（ document.write調用）。 嘗試在提示后發出document.write調用

Answer 2

首先，您無需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參考）：

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

我將讓您考慮使用文本單元格進行計算的問題。 使用當前腳本，您將在字符串上遇到運算符+ =的問題。 請記住，當您獲得顯示的數字時，將使用字符串而不是它所代表的以10為基數的數字。 您將需要函數parseFloat(stringValue)來實現。

希望這對您有所幫助，並祝您好運。

Answer 3

我認為您應該將腳本放在正文的末尾。 現在它開始運行，您的頁面才出現在屏幕上。

Answer 4

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

為什么Javascript動態HTML5表未顯示在頁面上

問題描述

4 個解決方案

解決方案1
1 2017-06-05 04:25:20

解決方案2
1 2017-06-05 04:52:07

解決方案3
0 2017-06-05 04:19:40

解決方案4
0 2017-06-05 04:36:03

為什么Javascript動態HTML5表未顯示在頁面上

問題描述

4 個解決方案

解決方案1 1 2017-06-05 04:25:20

解決方案2 1 2017-06-05 04:52:07

解決方案3 0 2017-06-05 04:19:40

解決方案4 0 2017-06-05 04:36:03

解決方案1
1 2017-06-05 04:25:20

解決方案2
1 2017-06-05 04:52:07

解決方案3
0 2017-06-05 04:19:40

解決方案4
0 2017-06-05 04:36:03