我找不到一种方法来获取要在方程中使用的输入，然后在 html 中显示结果

如何解决我找不到一种方法来获取要在方程中使用的输入，然后在 html 中显示结果

我的问题是我找不到在 HTML 文本框中获取输入然后在我拥有的等式中使用它的方法。

我有一个基本的投资计算器，可以计算在给定每月投资回报和初始投资的情况下，在一段时间后您将获得多少利润。鉴于您已将上个月的所有利润重新投资，该计划会每月返还您的余额。

当我用 window.prompt() 函数替换变量的值时，我的程序可以工作，但这似乎不方便，所以我想使用文本框作为方程变量的输入方法。

这是我目前的代码：

<form style="padding: 30px">
  <input type="number" id="holdingtime" placeholder=" hold on time" />
  <input type="number" id="initialinvestment" placeholder="initial investment" />
  <input type="number" id="monthlyreturn" placeholder="monthly return" />
  <input type="button">
  <br/>
</form>


<div class="dprogramitself" style="padding: 35px; padding-top: 1,font-size: 20px">

  <script>
    let holdtime = 201;
    let initialinvestment = 50000;
    let monthlyreturn = 0.15;

    document.eval("<li>",initialinvestment,"<br><hr>");
    for (let i = 0; i < holdtime; i++) {
      initialinvestment = initialinvestment + initialinvestment * monthlyreturn;
      document.write("<li>","<br><hr>");
    }
  </script>

</div>

对不起，我只是试图描述一些俗气的名字。随时提出问题，因为我被卡住了，任何帮助将不胜感激。我确定这是简单的事情，但我一直无法解决这个问题。

解决方法

你需要有一个事件监听器来告诉 JavaScript '嘿，当这个按钮被按下时，运行这个代码'。使用 ID 为 @app.callback( Output('datatable-upload-graph','figure'),Input('container-datatable','data') ) def display_gantt(container_datatable): df = pd.DataFrame(container_datatable) df['Start Date'] = pd.to_datetime(df['Start Date'],errors='coerce') df['End Date'] = pd.to_datetime(df['End Date'],errors='coerce') fig = px.timeline(df,x_start="Start Date",x_end="End Date",y="Project Name",color="Status") fig.update_yaxes(autorange="reversed") if container_datatable is None: return [] else: return fig app.config['suppress_callback_exceptions'] = True if __name__ == '__main__': app.run_server(debug=True,use_reloader=False) 的按钮，您可以向其添加事件侦听器，并在单击按钮时获取输入的值。然后您可以运行您的逻辑并显示它。

action-button

文档：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener、https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

,

你需要一些事件监听器

这里我从表单委托并使用任何字段的更改事件。当所有字段都填好后，我运行计算

window.addEventListener("load",function() { // when page has loaded
  document.getElementById("calcForm").addEventListener("change",function() { // anything changed
    let holdtime = +document.getElementById("holdingtime").value; // use unary plus to convert to number
    let initialinvestment = +document.getElementById("initialinvestment").value;
    let monthlyreturn = +document.getElementById("monthlyreturn").value;

    let html = [];
    if (holdtime > 0 && initialinvestment > 0 && monthlyreturn > 0) {
      for (let i = 0; i <= holdtime; i++) {
        html.push(`<li>${initialinvestment.toFixed(0)}<hr></li>`);
        initialinvestment += initialinvestment * monthlyreturn;
      }
    }
    document.querySelector(".dprogramitself").innerHTML = html.join("");
  });
});

ul {
  list-style: none;
}

<form style="padding: 30px" id="calcForm">
  <input type="number" id="holdingtime" placeholder=" hold on time" />
  <input type="number" id="initialinvestment" placeholder="initial investment" />
  <input type="number" id="monthlyreturn" placeholder="monthly return" />
</form>


<ul class="dprogramitself" style="padding: 35px; padding-top: 1,font-size: 20px">
</ul>