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

默认情况下，表单已提交。您需要截取submission event并停止默认的浏览器操作。

由于您尚未在action元素上指定form，因此它只是刷新页面，因为它不知道将数据发送到何处

这是一个示例代码，演示如何拦截和停止浏览器提交的所有表单。根据您的设置进行调整，这样您就只能阻止提交要阻止的表单。

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

每次我点击按钮页面刷新

1 个答案: