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 Here

Changes : 1] Removed # from getElementById function. 2] Changed button element to input tag with type button. This prevents form submission when clicked on it.