单选按钮表格立即计算价格

我已经编写了一个表单的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）;”对于某些元素。感谢名单 –

单选按钮表格立即计算价格

回答

相关问题