将JavaScript中的变量输出到HTML费用表中

Question

我正在尝试用收入和利润做一张桌子。我问收入和利润是多少，因此在程序运行时重新定义变量。这是HTML表格（我省略了HTML页面的其余部分以减少问题中的代码量）

<table border="0" style="width:100%"> 
      <thead>
       <tr>
         <th>Drink</th>
         <th>Revenue</th>
         <th>Profit</th>
       </tr>
      </thead>
      <tbody>
        <tr>
          <td> <b>Mocha</b> </td>
        </tr>

        <tr>
          <td>
            <p id='grandeMocha'></p>
          </td>
      </tr>


    </table>

这里是JavaScript

var revenue;
document.getElementById('grandeMocha').innerHTML = revenue
var userChoice = parseFloat(prompt("what is the revenue?"));
var revenue = userChoice;

除了表格说未定义收入变量应在的位置之外，其他所有操作均按预期进行。

Answer 1

我想它之所以不显示是因为您声明变量的顺序。试试这个

var revenue = parseFloat(prompt("what is the revenue?"));
document.getElementById('grandeMocha').innerHTML = revenue

Answer 2

在将其分配给html之前，需要具有提示中的值。当您更新该变量的值时，它不会自行更新HTML。为此，您需要类似React的东西。只需在分配给HTML之前从提示中获取值即可。