單選按鈕表格立即計算價格

我已經編寫了一個表單的javascript代碼來計算價格，而用戶在文本框中鍵入一個數字。計算公式會根據用戶在文本框中輸入的數量進行更改。單選按鈕表格立即計算價格

例如，如果數量在0到1200之間，則總價格=（200000 + 166.7 x facadeArea）x（projectStyle）x（projectFunction）。

問題是總價並沒有改變。請幫助我。

<html> 
<font face = "Algerian" ><h2>What Kind of Project Would You Like to Order? 
</h2></font> 
<form name ="mdl"> 



Project style:<br/> 
&nbsp &nbsp <input type="radio" name="options" value="1" 
onchange="estimateTotal(this);">modern 
&nbsp &nbsp <input type="radio" name="options" value="1.8" 
onchange="estimateTotal(this);">classic 
&nbsp &nbsp <input type="radio" name="options" value="1.6" 
onchange="estimateTotal(this);">traditional 
&nbsp &nbsp <input type="radio" name="options" value="1.7" 
onchange="estimateTotal(this);">prarmetric 
&nbsp &nbsp <input type="radio" name="options" value="1.3" 
onchange="estimateTotal(this);">organic 
<input type="hidden" name="options"> 
<br/> 


Project function:<br/> 
&nbsp &nbsp <input type="radio" name="style" value="1" 
onchange="estimateTotal(this);">villa 
&nbsp &nbsp <input type="radio" name="style" value="1.4" 
onchange="estimateTotal(this);">apartment 
&nbsp &nbsp <input type="radio" name="style" value="1.5" 
onchange="estimateTotal(this);">commercial 
&nbsp &nbsp <input type="radio" name="style" value="1.6" 
onchange="estimateTotal(this);">official 
&nbsp &nbsp <input type="radio" name="style" value="1.3" 
onchange="estimateTotal(this);">other 
<input type="hidden" name="style"> 
<br/> 

Facade Area <br/> 
&nbsp &nbsp <input type="text" name="area" value="0" 
onchange="estimateTotal(this);">sqm 
<input type="hidden" name="area"> 
<br/> 


<p>Total Price: <input type="text" name="total_price" value="0" 
readonly="readonly"></p> 

</form> 
</html> 


code: 

     <script type="text/javascript"> 
     var projectStyle = 
     document.querySelector('input[name=options]:checked').value, 
     projectFunction = 
     document.querySelector('input[name=style]:checked').value, 
     facadeArea = document.getElementByName('area').value; 


     function estimateTotal(input) { 
var total = parseFloat(mdl.total_price.value); 
var value = parseFloat(input.value); 

    if (input.type === 'radio') { 
    if (input.name === 'options') { 
     if (facadeArea == 0) {total = 0;} 
     else if (facadeArea > 0 && facadeArea <= 1200) { 
       total = parseInt(200000 + 166.7 * 
facadeArea)*projectStyle*projectFunction;} 
     else if (facadeArea > 1200 && facadeArea <= 4000) { 
       total = parseInt(400000 + 35.71 * 
facadeArea)*projectStyle*projectFunction;} 
     else if (facadeArea > 4000 && facadeArea <= 10000) { 
       total = parseInt(500000 + 16.66 * 
facadeArea)*projectStyle*projectFunction;} 
     else {total = 700000;} 
    } 

    } 


    mdl.total_price.value = total; 
} 

</script>

來源

2017-07-17 Farbod.T

什麼是您所遇到的錯誤？根本沒有顯示總數**或**您得到的總數不正確**或**是系統錯誤？ –

這是什麼工作？你有錯誤嗎？計算的價格是否錯誤？沒有任何事情發生？ – Cleared

錯誤在於總價格錯誤。只是顯示「700000」 –

你有幾個不同的問題：

您所查詢的選擇將通過錯誤，如果沒有選擇的命名輸入或其他一組。

document.getElementsByName函數返回一個沒有.value屬性的HTMLCollection。這是由固定由於該值沒有被設置你的if語句總是導致total = 700000;

該值也需要這樣一個轉換爲使用Number您if語句的數量結果參考使用document.getElementsByName('area')[0].value

元素正常工作。

 var ps = 'input[name="options"]:checked'; 
 
     var pf = 'input[name="style"]:checked' 
 

 
     function estimateTotal(input) { 
 
      if (!document.querySelector(ps) || document.querySelector(ps).length == 0) return; 
 
      if (!document.querySelector(pf) || document.querySelector(pf) .length == 0) return; 
 

 
      var projectStyle = document.querySelector(pf).value; 
 
      var projectFunction = document.querySelector(ps).value; 
 
      facadeArea = Number(document.getElementsByName('area')[0].value); 
 

 
      var total = parseFloat(mdl.total_price.value); 
 
      var value = parseFloat(input.value); 
 

 
      if (input.type === 'radio') { 
 
      if (input.name === 'options') { 
 
      if (facadeArea == 0) { 
 
       total = 0; 
 
      } else if (facadeArea > 0 && facadeArea <= 1200) { 
 
       total = parseInt(200000 + 166.7 * 
 
        facadeArea) * projectStyle * projectFunction; 
 
      } else if (facadeArea > 1200 && facadeArea <= 4000) { 
 
       total = parseInt(400000 + 35.71 * 
 
        facadeArea) * projectStyle * projectFunction; 
 
      } else if (facadeArea > 4000 && facadeArea <= 10000) { 
 
       total = parseInt(500000 + 16.66 * 
 
        facadeArea) * projectStyle * projectFunction; 
 
      } else { 
 
       total = 700000; 
 
      } 
 
      } 
 

 
      } 
 

 

 
      mdl.total_price.value = total; 
 
     }

<font face="Algerian"> 
 
     <h2> 
 
      What Kind of Project Would You Like to Order? 
 
     </h2> 
 
    </font> 
 
    <form name="mdl"> 
 

 

 
     <div> 
 
      Project style: 
 
     </div> 
 
     <div> 
 
      &nbsp &nbsp 
 
      <input type="radio" name="options" value="1" onchange="estimateTotal(this);">modern &nbsp &nbsp <input type="radio" name="options" value="1.8" onchange="estimateTotal(this);">classic &nbsp &nbsp 
 
      <input type="radio" name="options" value="1.6" onchange="estimateTotal(this);">traditional &nbsp &nbsp 
 
      <input type="radio" name="options" value="1.7" onchange="estimateTotal(this);">prarmetric &nbsp &nbsp <input type="radio" name="options" value="1.3" onchange="estimateTotal(this);">organic 
 
      <input type="hidden" name="options"> 
 
     </div> 
 
     <div> Project function</div> 
 
     <div> 
 
      <input type="radio" name="style" value="1" onchange="estimateTotal(this);">villa &nbsp &nbsp <input type="radio" name="style" value="1.4" onchange="estimateTotal(this);">apartment &nbsp &nbsp <input type="radio" name="style" value="1.5" onchange="estimateTotal(this);">commercial 
 
      &nbsp &nbsp <input type="radio" name="style" value="1.6" onchange="estimateTotal(this);">official &nbsp &nbsp <input type="radio" name="style" value="1.3" onchange="estimateTotal(this);">other 
 
      <input type="hidden" name="style"> 
 
      <br /> Facade Area <br /> &nbsp &nbsp <input type="text" name="area" value="0" onchange="estimateTotal(this);">sqm 
 
      <input type="hidden" name="area"> 
 
     </div> 
 
     <br /> 
 

 

 
     <p>Total Price: <input type="text" name="total_price" value="0" readonly="readonly"></p> 
 

 
    </form>

來源

2017-07-17 07:40:33

是的，謝謝。代碼現在可用。另一個問題是，我想要在單獨的JavaScript文件中的代碼，但似乎代碼不起作用。如果我想在單獨的文件中使用它，我應該更改代碼的某些部分嗎？我收到此錯誤：「輸入未定義」 –

這樣我現在已經設置了代碼，放在哪裏並不重要。 '輸入未定義'意味着你有一些調用'estimatetotal'而沒有通過'this'作爲參數。確保你所有的元素都是'onchange =「estimateTotal（this）;」' –

是的。我忘了定義onchange =「estimateTotal（this）;」對於某些元素。感謝名單 –

單選按鈕表格立即計算價格

回答

相關問題