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（Document Object Model）のテキスト要素を作成し、それを更新することができます（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

私は、テキストセルで計算する問題を考えるようになります。現在のスクリプトでは、文字列の演算子+ =で問題が発生します。表示された番号を取得すると、それが表す10進数ではなく文字列で作業することに注意してください。そのためには、関数parseFloat(stringValue)が必要です。

私はこれが助けられ、幸運を願っています。

出典

2017-06-05 04:52:07

Javascript動的HTML5テーブルが表示されないのはなぜですか？

答えて

関連する問題