Javascript文件乱七八糟，我需要帮助来修复它

Question

我是个编程新手。我正在做一些超文本标记语言的工作，今天进入了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的calculate函数中拼写错误了'amount‘。

此外，在您的HTML语言中，具有showamount类的输入元素应该具有id showamount。

另一个问题是，当在calculate函数中单击按钮时，需要检索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看起来没那么糟糕。