Question

我试图在prodNum之前使用无限循环，数量提示连续接受用户输入和输出到表。我运行它时程序运行正常，除了在循环中从不显示表。我尝试将脚本移动到网页的不同部分。使用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>

Answer 1

将代码放入函数中，然后使用setTimeout()再次调用它。这将允许浏览器在等待超时时呈现前一个表。

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>

顺便说一句，您不需要使用parseFloat(total1)，因为total1已经是浮动广告。

Answer 2

当您使用window.prompt（）时，输出将始终位于''或“”之间所以当你想要正常工作时，只需将案例编号放在''/“”

之间

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);
}

为什么这个Javascript程序在循环中使用时不显示表

2 个答案: