Блог

Прямо сейчас я работаю над страницей кредита, и она почти завершена. Может кто-нибудь сказать мне, как сбросить мою форму погашения, когда я делаю новый кредит, если мой текущий кредит был полностью оплачен. Я создал функцию. Первый — рассчитать сумму кредита, сумму еженедельного кредита и сумму за еженедельный период для выплаты кредита.

Вот HTML-страница:

 <div id="loanpage">
  <form id="loanform">
    <h3>Loan Calculator</h3>
    <table>
      <tr>
        <td>Loan amount required</td>
        <td>
          <input type="text" min="100" max="100,000" id="loanamount" autocomplete="off" required placeholder="Max 100,000" />
        </td>
      </tr>
      <tr>
        <td>currency</td>
        <td>
          <select name="currency" value="currency" id="currency">
            <option id="currency1"></option>
            <option id="currency2"></option>
            <option id="currency3"></option>
            <option id="currency4"></option>
            <option id="currency5"></option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Repayment period in years</td>
        <td>
          <input type="text" min="1" max="5" id="period" autocomplete="off" placeholder="Max 5 years" />
        </td>
      </tr>
      <tr>
        <td>Interest p.a. </td>
        <td>
          <input type="text" value="5%" disabled id="interest" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" value="Calculate weekly instalment" class="btn btn-success" onclick="loanForm();" />
        </td>
      </tr>
      <tr>
        <td>Total amount payable</td>
        <td>
          <input type="text" disabled id="payableloan" />
        </td>
      </tr>
      <tr>
        <td>Weekly instalment amount</td>
        <td>
          <input type="text" disabled id="weeklyloan" />
        </td>
      </tr>
      <tr>
        <td>Number of instalments</td>
        <td>
          <input type="text" disabled id="numberInstalment" />
        </td>
      </tr>
    </table>
  </form>
  <div id="repayform">
    <h3>Loan payment</h3>
    <form>
      <table>
        <tr>
          <td>Total amount payable</td>
          <td>
            <input type="text" id="repayamount" disabled autocomplete="off" />
          </td>
        </tr>
        <tr>
          <td>Total instalments paid</td>
          <td>
            <input type="text" name="paidloan" disabled id="amountPaid" />
          </td>
        </tr>
        <tr>
          <td>Loan balance payable</td>
          <td>
            <input type="text" disabled name="paidloan" id="currentBalance" />
          </td>
        </tr>
        <tr>
          <td>Instalment amount due</td>
          <td>
            <input type="text" disabled name="paidloan" id="due" />
          </td>
        </tr>
        <tr>
          <td>
            <input type="button" class="btn btn-success" id="paybtn" onclick="payNow()" value="Pay now" />
          </td>
        </tr>
      </table>
    </form>
  </div>
</div>
  

Вот мой файл javascript:

 let loanInterestRate = 5;
let principal = document.getElementById("loanamount").value;
let userCurrency = document.getElementById("currency").value;
let loanPeriod = document.getElementById("period").value;
let interestTotal = (loanInterestRate / 100) * loanPeriod   1;
let loanAmountPayable = principal * interestTotal;
let loanPeriodInWeeks = loanPeriod * 52;
let weeklyInstalment = loanAmountPayable / loanPeriodInWeeks;
let instalmentPaidTotal = 0;
let payButton = document.getElementById("paybtn");

function loanForm() {
  principal = document.getElementById("loanamount").value;
  userCurrency = document.getElementById("currency").value;
  loanPeriod = document.getElementById("period").value;
  interestTotal = (loanInterestRate / 100) * loanPeriod   1;
  loanAmountPayable = principal * interestTotal;
  loanPeriodInWeeks = loanPeriod * 52;
  weeklyInstalment = loanAmountPayable / loanPeriodInWeeks;
  document.getElementById("payableloan").value = userCurrency   " "   loanAmountPayable.toFixed(2);
  document.getElementById("weeklyloan").value = userCurrency   " "   weeklyInstalment.toFixed(2);
  document.getElementById("numberInstalment").value = loanPeriodInWeeks   " weeks";
  document.getElementById("repayamount").value = userCurrency   " "   loanAmountPayable.toFixed(2);
  document.getElementById("due").value = userCurrency   " "   weeklyInstalment.toFixed(2);
}

function payNow() {
  instalmentPaidTotal = weeklyInstalment   instalmentPaidTotal;
  let loanBalancePayable = loanAmountPayable - instalmentPaidTotal;
  if (loanBalancePayable > 0) {
    document.getElementById("amountPaid").value =
      userCurrency   " "   instalmentPaidTotal.toFixed(2);
    document.getElementById("currentBalance").value =
      userCurrency   " "   loanBalancePayable.toFixed(2);
  } else {
    alert("You loan account is 0");
  }
}
  

Любая помощь и предложения приветствуются и приветствуются.

Судя по всему, вы можете сделать две вещи для сброса.

1. Сброс переменных JavaScript
2. Сброс формы HTML

Оба вышеперечисленных действия можно выполнить с помощью JavaScript. Что вам нужно сделать, это:

 // Since a few things are dependent on the form values, first reset the form.
document.getElementById("loanform").reset();
// JavaScript Variables Reset.
// Reset to the initialisation data.
loanInterestRate = 5;
principal = document.getElementById("loanamount").value;
userCurrency = document.getElementById("currency").value;
loanPeriod = document.getElementById("period").value;
interestTotal = (loanInterestRate / 100) * loanPeriod   1;
loanAmountPayable = principal * interestTotal;
loanPeriodInWeeks = loanPeriod * 52;
weeklyInstalment = loanAmountPayable / loanPeriodInWeeks;
instalmentPaidTotal = 0;
  

Вышеуказанное должно сработать. Дайте мне знать, если возникнут какие-либо вопросы.

Лучший способ — использовать вышеуказанное в функции:

 function init() {
  // Since a few things are dependent on the form values, first reset the form.
  document.getElementById("loanform").reset();
  // JavaScript Variables Reset.
  // Reset to the initialisation data.
  loanInterestRate = 5;
  principal = document.getElementById("loanamount").value;
  userCurrency = document.getElementById("currency").value;
  loanPeriod = document.getElementById("period").value;
  interestTotal = (loanInterestRate / 100) * loanPeriod   1;
  loanAmountPayable = principal * interestTotal;
  loanPeriodInWeeks = loanPeriod * 52;
  weeklyInstalment = loanAmountPayable / loanPeriodInWeeks;
  instalmentPaidTotal = 0;
}
// Call the function...
init();
  

Вы можете назвать вышеуказанную функцию как init() или reset() в соответствии с вашим удобством.