Why doesn't Javascript Dynamic HTML5 Table Not Appear on Page

Question

I am attempting to take quantities of products and multiplying them by the price before inserting these constantly updating values into an HTML table. I am using a forever loop to constantly take input for the sake of the example.

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

embarq · Accepted Answer · 2017-06-05 04:25:20Z

1

As mentioned @vZ10 you need to put the script in the end of the body tag. Also you're prompting user to fill a data after actual render of a table(document.write calls). Try to place document.write calls after prompt

answered Jun 5, 2017 at 4:25

embarq

3351 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Frederik.L · Accepted Answer · 2017-06-05 05:19:44Z

First, you don't need to document.write this part:

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

In fact, you don't need to use document.write at all in your situation and it can be healthier to avoid it when not necessary.

You could relieve some pain by having this markup as a base model:

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>

Then, you can access your fields with something like this (the script being at the end of the body, or at least after the table markup):

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";

Even better, you can create a DOM (Document Object Model) text element and update it (see 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

I will let you think about the problem of calculating with text cells. With your current script, you will face issues with operator += on a string. Keep in mind that when you get a displayed number, you work with a string and not the base 10 number represented by it. You will need the function parseFloat(stringValue) to achieve that.

I hope this helped and good luck.

vZ10 · Accepted Answer · 2017-06-05 04:19:40Z

0

I think you should put your script at the end of the body. Now it runs before your page appear on the screen.

answered Jun 5, 2017 at 4:19

vZ10

2,7562 gold badges25 silver badges34 bronze badges

1 Comment

Alexander Over a year ago

Now it runs before the DOM has builded!

mehtasuraj09 · Accepted Answer · 2017-06-05 04:36:03Z

0

You have to write script after your <body> tag ends i.e. after </body>.

answered Jun 5, 2017 at 4:36

mehtasuraj09

13912 bronze badges

Collectives™ on Stack Overflow

Why doesn't Javascript Dynamic HTML5 Table Not Appear on Page

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related