每次單擊按鈕頁面都會刷新

Question

標題幾乎說明了一切。 每次單擊“計算”按鈕，頁面都會刷新。 我在其他頁面上的其他按鈕上添加了stopPropagation和preventDefault，但是在這種情況下它們似乎不起作用。 有什么想法嗎？

JS：

/******** Loan Balance Constructor *********/
function LoanBalance(mLoanAmt, mIntRate, nMonths, mMonthlyPmt){
//Declarations
this.loanAmount = mLoanAmt;
this.interestRate = mIntRate;
this.numbOfMonths = nMonths;
this.monthlyPayment = mMonthlyPmt;

//Calculates Remaining Balance
this.calculateRemaining = function(){
    console.log(this.loanAmount);
    console.log(this.interestRate);
    console.log(this.numbOfMonths);
    console.log(this.monthlyPayment);
        //COME BACK TO FIX THE FORMULA 
var remainingBalance = this.loanAmount*(Math.pow(1+this.interestRate, this.numbOfMonths) -
                        (this.monthlyPayment*(Math.pow(1 + this.interestRate, this.numbOfMonths) - 1) / this.interestRate));

return remainingBalance;
    }
    return this.calculateRemaining()
}

function newBalanceObject(e){
e.stopPropagation();
e.preventDefault();

var balanceObject = new LoanBalance(document.getElementById("loanAmount").value, document.getElementById("interestRate").value, 
                                    document.getElementById("numMonthsPaid").value, document.getElementById("sliderDuration").value);

var result = balanceObject.calculateRemaining();
document.getElementById("remainingBalanceTag").innerHTML = "Your remaining balance is: " + "$" + result.toFixed(2);

}

HTML：

        <div id="remainingBalance">
        <h1 class="text-center">Loan Balance Calculator</h1>
        <form>
            <div class="form-group">
                <label for="loanAmount">Loan Amount:</label>
                <input class="form-control" id="loanAmount">
            </div>

            <div class="form-group">
                <label for="interestRate">Interest Rate:</label>
                <input class="form-control" id="interestRate" placeholder="Please enter number as a decimal">
            </div>

            <div class="form-group">
                <label for="numMonthsPaid">Number of Months Paid: </label>
                <input id="numMonthsPaid" type="text" data-slider-min="0" data-slider-max="600" data-slider-step="1" data-slider-value="300">

            <div class="form-group">
                <label for="sliderDuration">Loan Duration: </label>
                <input id="sliderDuration" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="600" data-slider-step="1" data-slider-value="300"/>
            </div>
            <button id="calcButton" class="btn btn-default">Calculate</button>
        </form>
        <h1 class="text-center" id="remainingBalanceTag"></h1>
    </div>

Answer 1

默認情況下將提交表單。 您需要攔截提交事件並停止默認的瀏覽器操作。

由於您尚未在form元素上指定action ，因此它只是刷新頁面，因為它不知道將數據發送到哪里。

這是一個示例代碼，顯示了如何攔截和阻止瀏覽器提交的所有表單。 根據您的設置進行調整，這樣您就只能阻止提交想要阻止的表單。

Array.from(document.forms).forEach(form => {
  form.addEventListener('submit', e => e.preventDefault())
}