Javascript onClick() 不適用於我的按鈕來計算表單輸入？

Question

我想從 HTML 輸入中獲取輸入值，然后我想通過單擊結果按鈕來顯示該值。 這是我的代碼：

HTML：

<form class="form-inline">
<div class="row">
    <div class="col-md-6 col-sm-6">
        <div class="form-group">
            <div class="col-md-5 col-sm-5">
                <label for="purchase-price">Purchase Price</label>
            </div>
            <div class="col-md-7 col-sm-7">
                <div class="select-wrapper">
                    <input type="text" id="purchase-price">
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-sm-6">
        <div class="col-md-5 col-sm-5">
            <button class="mortgage-button" id="mortgage-calculate" onClick="result()">CALCULATE</button>
        </div>
    </div>
</div>
<!-- end of row -->
</form>

JavaScript：

    var paid_in_percent;
function setValue(){
    paid_in_percent = document.getElementById("#purchase-price").value;

}   
function result(){
    setValue();
    alert(paid_in_percent);
}

其實我想要的是：

我想從 HTML 輸入中獲取輸入，然后我想計算這些結果，最后單擊我想顯示計算的結果/計算按鈕。

這是jsfiddle

Answer 1

更正了您的代碼

HTML

<form class="form-inline">
    <div class="row">
        <div class="col-md-6 col-sm-6">
            <div class="form-group">
                <div class="col-md-5 col-sm-5">
                    <label for="purchase-price">Purchase Price</label>
                </div>
                <div class="col-md-7 col-sm-7">
                    <div class="select-wrapper">
                        <input type="text" id="purchase-price">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-5 col-sm-5">
                    <label for="down-payment">Down Payment</label>
                </div>
                <div class="col-md-7 col-sm-7">
                    <input type="text" id="down-payment">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-5 col-sm-5">
                    <label for="moartgage-term">Mortgage Term</label>
                </div>
                <div class="col-md-7 col-sm-7">
                    <input type="text" id="mortgage-term">
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="form-group">
                <div class="col-md-5 col-sm-5">
                    <label for="interest-rate">Interest Rate</label>
                </div>
                <div class="col-md-7 col-sm-7">
                    <input type="text" id="interest-rate">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-5 col-sm-5">
                    <label for="purchase-price">Property Tax</label>
                </div>
                <div class="col-md-7 col-sm-7">
                    <input type="text" id="property-tax">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-5 col-sm-5">
                    <label for="down-payment">P.Insurance</label>
                </div>
                <div class="col-md-7 col-sm-7">
                    <input type="text" id="p-insurance">
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="col-md-5 col-sm-5">
                <input class="mortgage-button" type="button" value="CALCULATE" id="mortgage-calculate" onClick="result()"/>
            </div>
        </div>
    </div>
    <!-- end of row -->
</form>

JavaScript

var paid_in_percent;
function setValue(){
    paid_in_percent = document.getElementById("purchase-price").value;

}   
function result(){
    setValue();
    alert(paid_in_percent);
}

JSFIDDLE在這里

更改：1] 從getElementById函數中刪除了# 。 2] 將按鈕元素更改為帶有類型按鈕的輸入標簽。 這可以防止在單擊時提交表單。