Why Does This Javascript Program Not Display Table When Used in Loop

Question

I am trying to use an infinite loop before prodNum and quantity prompts to continuously accept user input and output to the table. The program works fine when I run it, except in a loop the table is never displayed. I tried moving the script to different parts of the web page. Using Chrome.

       <html>

<head>
</head>

<body>

  <table>
    <tr>
      <th>Product Number</th>
      <th>Total Sales ($)</th>
    </tr>
    <tr>
      <td>1</td>
      <td id="total1">$0.00</td>
    </tr>
    <tr>
      <td>2</td>
      <td id="total2">$0.00</td>
    </tr>
    <tr>
      <td>3</td>
      <td id="total3">$0.00</td>
    </tr>
    <tr>
      <td>4</td>
      <td id="total4">$0.00</td>
    </tr>
    <tr>
      <td>5</td>
      <td id="total5">$0.00</td>
    </tr>
  </table>


  <script type="text/javascript">
    var total1 = 0.00;
    var total2 = 0.00;
    var total3 = 0.00;
    var total4 = 0.00;
    var total5 = 0.00;
    var prodNum = 0;
    var prodNumInt = 0;
    quantityFloat = 0.00;

    var quantity = 0;


    prodNum = window.prompt("Please enter the product number (Enter -1 to quit)");
    quantity = window.prompt("Please enter the quantity sold (Enter -2 to quit)");
    prodNumInt = parseInt(prodNum);
    quantityFloat = parseFloat(quantity);

    switch (prodNumInt) {
      case 1:
        total1 += quantityFloat * 2.98;
        document.getElementById("total1").innerHTML = "$" + parseFloat(total1).toFixed(2);
        break;
      case 2:
        total2 += quantityFloat * 4.50;
        document.getElementById("total2").innerHTML = "$" + parseFloat(total2).toFixed(2);
        break;
      case 3:
        total3 += quantityFloat * 9.98;
        document.getElementById("total3").innerHTML = "$" + parseFloat(total3).toFixed(2);
        break;
      case 4:
        total4 += quantityFloat * 4.49;
        document.getElementById("total4").innerHTML = "$" + parseFloat(total4).toFixed(2);
        break;
      case 5:
        total5 += quantityFloat * 6.87;
        document.getElementById("total5").innerHTML = "$" + parseFloat(total5).toFixed(2);
    }
  </script>
</body>

</html>

[Similar question here](https://stackoverflow.com/questions/14643617/create-table-using-javascript) — dale landry, Jun 06 '17 at 00:19
Table will not be updated until you exit the loop since you are locking up the UI with the loop. — epascarello, Jun 06 '17 at 00:21
I took the loop out because it wasn't functioning properly but add.. while(true){ before prodNum = window.prompt ... and } before tag — Pablo, Jun 06 '17 at 00:28
You mustn't put an infinite loop in Javascript that runs in a browser. Nothing is displayed until the script finishes. — Barmar, Jun 06 '17 at 00:35
Instead of a loop, you can use `setTimeout()` to call the function again after a time period. — Barmar, Jun 06 '17 at 00:36
`except in a loop the table is never displayed` - do you observe any other issue? like your browser telling you something important about a script making it unresponsive perhaps - details details — Jaromanda X, Jun 06 '17 at 00:40

score 0 · Answer 1 · answered Jun 06 '17 at 00:46

Put your code in a function, and call it again with setTimeout(). This will allow the browser to render the previous table while waiting for the timeout.

function update_table() {
  var total1 = 0.00;
  var total2 = 0.00;
  var total3 = 0.00;
  var total4 = 0.00;
  var total5 = 0.00;
  var prodNum = 0;
  var prodNumInt = 0;
  var quantityFloat = 0.00;

  var quantity = 0;


  prodNum = window.prompt("Please enter the product number (Enter -1 to quit)");
  if (prodNum == '-1') {
    return;
  }
  quantity = window.prompt("Please enter the quantity sold (Enter -2 to quit)");
  if (quantity == '-2') {
    return;
  }
  prodNumInt = parseInt(prodNum);
  quantityFloat = parseFloat(quantity);

  switch (prodNumInt) {
    case 1:
      total1 += quantityFloat * 2.98;
      document.getElementById("total1").innerHTML = "$" + total1.toFixed(2);
      break;
    case 2:
      total2 += quantityFloat * 4.50;
      document.getElementById("total2").innerHTML = "$" + total2.toFixed(2);
      break;
    case 3:
      total3 += quantityFloat * 9.98;
      document.getElementById("total3").innerHTML = "$" + total3.toFixed(2);
      break;
    case 4:
      total4 += quantityFloat * 4.49;
      document.getElementById("total4").innerHTML = "$" + total4.toFixed(2);
      break;
    case 5:
      total5 += quantityFloat * 6.87;
      document.getElementById("total5").innerHTML = "$" + total5.toFixed(2);

  }
  setTimeout(update_table, 1000);
}

update_table();

<table>
  <tr>
    <th>Product Number</th>
    <th>Total Sales ($)</th>
  </tr>
  <tr>
    <td>1</td>
    <td id="total1">$0.00</td>
  </tr>
  <tr>
    <td>2</td>
    <td id="total2">$0.00</td>
  </tr>
  <tr>
    <td>3</td>
    <td id="total3">$0.00</td>
  </tr>
  <tr>
    <td>4</td>
    <td id="total4">$0.00</td>
  </tr>
  <tr>
    <td>5</td>
    <td id="total5">$0.00</td>
  </tr>
</table>

BTW, you don't need to use parseFloat(total1), since total1 is already a float.

Why Does This Javascript Program Not Display Table When Used in Loop

1 Answers1