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

的變化：1]從getElementById功能移除#。 2]更改了 按鈕元素以輸入具有類型按鈕的標記。這可以防止在點擊它時提交表單 。