Javascript file messed up and I need help fixing it

Question

I am new to coding. I am doing some HTML work and today got into JavaScript. I have tried by myself fixing this and trying to get it done by researching many things and watching videos but I still can't get it right.

So what I am trying to do here is a simple calculator of financial returns, I have a constant of 33% return and I am trying that the person can input his desired amount to invest and calculate how much money he will get in return. The simple Excel math is:

( 15000 / 33% ) = 45,454

I realized that I cant use percentages in JavaScript so I decided to create a constant which eventually will give me 33% (8.25/25)

HTML code:

<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 code:

<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>

You need to retrieve `inputAmmount` on button click, not on pageload (it'll be empty on pageload). You also need an `inputAmmount` button on the HTML — CertainPerformance, Dec 22 '19 at 06:31
Beside that, you should use `document.getElementById('showammount').value = ..` not just `document.getElementById('showammount') = ..`. — Titus, Dec 22 '19 at 06:32
@CertainPerformance how do I retrieve inputAmmount on button click? — Juan Pablo Gaviria, Dec 22 '19 at 06:36
Welcome to SO! Please don't put unrelated content about programming and question. Such as "Thank You", "I am new to programming". — Lin Du, Dec 22 '19 at 06:55
You can store percentages values like this. use 0.33 instead of 33% ( 15000 / 0.33 ) will also give you the value 45,454 — Dulara Malindu, Dec 22 '19 at 07:48

score 2 · Accepted Answer · edited Jul 11 '21 at 12:56

One problem is here -

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

                    }

You need to assign the inputAmount / percent to the value of the element, not to the element itself, so replace it by

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

                    }

As pointed out by a commentor, there is one more mistake - You used exchange-button as a variable but it is never defined(and is also not a valid identifier), so also replace the line

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

with

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

Another problem was that you had misspelled 'amount' in calculate function in the getElementById.

Also, in your HTML, input element with class showamount should have the id showamount.

Another problem is you need to retrieve the value of inputAmount when the button is clicked inside the calculate function. The below code is working fine -

<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>

Hope this helps :)

btw, your javascript is not looking that bad.

You should also address `exchange-btn` because it was never defined and that is not a valid variable name anyways. — Titus, Dec 22 '19 at 06:41
@Titus How do I addresss that?, I tried the code from Sanil but still didn't work out — Juan Pablo Gaviria, Dec 22 '19 at 06:43
I tried it out here : https://js.do/code/385511. Still no luck guys :( — Juan Pablo Gaviria, Dec 22 '19 at 06:45
@JuanPabloGaviria Instead of `exchange-btn.addEventListener...` you'll have to use something like `document.querySelector('.calculateNow').addEventListener...`. — Titus, Dec 22 '19 at 06:46
Still no luck :(, and another guy removed the pizza comment, so if you fine with that text me up for the free pizza :) — Juan Pablo Gaviria, Dec 22 '19 at 06:55
I updated my answer with some more changes. It is working fine now. You can try running it by clicking 'Run code snippet' button as well. I don't want the free pizza though, trying to stay off unhealthy food, thanks for the offer though :D — Sanil Khurana, Dec 22 '19 at 06:58
@SanilKhurana MAN THANK YOU SO SO SO SO MUCH, it finally works and I have been breaking my head all night. Im gonna take some javascript courses soon. By any means do you know how can I make the "showammount" variable only display no digits — Juan Pablo Gaviria, Dec 22 '19 at 07:47
@SanilKhurana (continuation) after the comma for example input 20000 output goes 60606,0606060606 any idea how to make the output more "human readable for example 60,606 ? — Juan Pablo Gaviria, Dec 22 '19 at 07:49
@JuanPabloGaviria Just change ```inputAmount / percentage``` with ```Math.round(inputAmount / percentage)```. There is more information here - https://stackoverflow.com/questions/7641818/how-can-i-remove-the-decimal-part-from-javascript-number. Also updated my answer — Sanil Khurana, Dec 22 '19 at 07:54

Javascript file messed up and I need help fixing it

1 Answers1