时间戳

首页 > 解决方案 > Javascript 文件搞砸了，我需要帮助修复它

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

问题描述

我是编码新手。我正在做一些 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>

标签： javascripthtmlarraysformsweb

解决方案

这里有一个问题——

                    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 中，带有 class 的 input 元素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 看起来并不那么糟糕。

推荐阅读