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 的计算函数中拼错了“amount”。

此外，在 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 看起来还不错。