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

更改：1]从#功能中删除了getElementById。 2]改变了按钮元素用类型按钮输入标签。这可以防止形式提交时单击它。

Javascript onClick（）不能用于我的按钮来计算表单输入？

1 个答案: