Javascript 文件搞砸了，我需要帮助修复它

Question

我是编码新手。我正在做一些 HTML 工作，今天进入了 JavaScript。我自己尝试过解决这个问题，并尝试通过研究很多东西和观看视频来完成它，但我仍然无法做到。

所以我在这里要做的是一个简单的财务回报计算器，我的回报率为 33%，我试图让这个人输入他想要的投资金额并计算他会得到多少钱返回。简单的 Excel 数学是：

( 15000 / 33% ) = 45,454

我意识到我不能在 JavaScript 中使用百分比，所以我决定创建一个最终给我 33% (8.25/25) 的常量

HTML 代码：

<div class="col-xl-6 mt-md-30 mt-xs-30 mt-sm-30">
  <div class="card">
    <div class="card-body">
      <h4 class="header-title">Calculate Earnings</h4>
      <div class="exhcange-rate mt-5">
        <form action="#">
          <div class="input-form">
            <input type="text" placeholder="15,000" value="" id="amount" />
            <span>USD</span>
          </div>
          <div class="exchange-devider">In 2025:</div>
          <div class="input-form">
            <input
              type="text"
              placeholder="45,454"
              value=""
              class="showamount"
            />
            <span>USD</span>
          </div>
          <div class="exchange-btn">
            <button class="calculateNow" type="calculateNow">
              Calculate Now
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

javascript代码：

<script type="text/javascript">
  const percent = 8.25 / 25;
  var inputAmount = document.getElementById("amount").value;

  function calculate(event) {
    document.getElementById("showamount") = inputAmount / percent;
  }

  exchange - btn.addEventListener("click", calculate);
</script>

Answer 1

这里有一个问题-

                    function calculate(event) {
                      document.getElementById('showamount') =
                      inputAmount / percent ;

                    }

你需要将inputAmount / percent赋值给元素的值，而不是元素本身，所以替换为

                    function calculate(event) {
                      document.getElementById('showamount').value =
                      inputAmount / percent ;

                    }

正如评论员所指出的，还有一个错误 - 您使用exchange-button 作为变量，但它从未定义（也不是有效的标识符），所以也替换该行

exchange-btn.addEventListener('click', calculate);

与

document.getElementsByClassName('calculateNow')[0].addEventListener('click', calculate);

另一个问题是您在 getElementById 的计算函数中拼错了“金额”。

此外，在您的 HTML 中，类为 showamount 的输入元素的 id 应为 showamount。

另一个问题是当在计算函数内单击按钮时，您需要检索inputAmount 的值。下面的代码工作正常 -

<div class="col-xl-6 mt-md-30 mt-xs-30 mt-sm-30">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title">Calculate Earnings</h4>
                                <div class="exhcange-rate mt-5">
                                    <form action="#">
                                        <div class="input-form">
                                            <input type="number" placeholder="15,000" value="" id="amount">
                                            <span>USD</span>
                                        </div>
                                        <div class="exchange-devider">In 2025:</div>
                                        <div class="input-form">
                                            <input type="number" placeholder="45,454" value="" id="showamount">
                                            <span>USD</span>
                                        </div>
                                        <div class="exchange-btn">
                                            <button class="calculateNow" type="calculateNow">Calculate Now</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>


                    <script type="text/javascript">

                    const percent = (8.25/25);

                    function calculate(event) {
                      // I put inputAmount here and removed it from outside so it will retrieved when the button is clicked.
                      var inputAmount = document.getElementById('amount').value;
                      document.getElementById('showamount').value =
                      Math.round(inputAmount / percent) ;
                    }

                    document.getElementsByClassName('calculateNow')[0].addEventListener('click', calculate);

               </script>

希望这会有所帮助:)

顺便说一句，你的 javascript 看起来还不错。