代码之家 › 专栏 › 技术社区 › Jared Belcher

财务计划报价计算器

calculator html javascript

-2

Jared Belcher · 技术社区 · 8 年前

(Income * 0.01) + ((Property Value + Investments - Debt)*0.005)

怎么了?

function calculatePrice(myform){

  //Get selected data 
  var elt = document.getElementById(âincome");
  var elt = document.getElementById(âproperty");
  var elt = document.getElementById(âinvestments");
  var elt = document.getElementById("debt");
    

    
  //convert data to integers
  income = parseInt(income);
  property = parseInt(property);
  investments = parseInt(investments);
  investments = parseInt(debt);
    
  //calculate total value  
var result=Math.max(income * 0.01 + (property + investments - debt)*0.005, 150);
    
  //print value to  PicExtPrice 
  document.getElementById("PicExtPrice").value=total;

}

<FORM Name="myform">

  <div>
    <label for="income">Yearly Income</label>
    <input id="income" type="text">
  </div>

  <div>
    <label for="property">Estimated Value of your Asstes (house, land, etc.)</label>
    <input id="property" type="text">
  </div>

  <div>
    <label for="investments">Estimated Value of Investments (stocks, bonds, IRA, etc.)</label>
    <input id="investments" type="text">
  </div>

  <div>
    <label for="debt">Estimated Debt (mortgage, loans, credit cards)</label>
    <input id="debt" type="text">
  </div>

</FORM>

<button type="button" onclick="calculatePrice()">Calculate</button> The new calculated price:
<INPUT type="text" id="PicExtPrice" Size=8>

View on JSFiddle

1 回复 | 直到 8 年前

Carsten Massmann 8 年前

基本公式应如下所示:

var result=Math.max(Income * 0.01 + (PropertyValue + Investments - Debt)*0.005, 150);

假设变量已经包含来自相关输入字段的数值。您仍然需要确保每次更改一个输入字段(或每次释放键)时都会触发此计算,并且结果会写回HTML页面上的适当位置。所有这些都可以通过几个jquery命令轻松完成。

result.toFixed(2) .

我已经把你的jsfiddle转换成了一个内部SO fiddle。你的代码有几个小问题。查看以下内容并找出差异:

function getv(id){return parseInt(document.getElementById(id).value||0);}
function calculatePrice(myform){
  // calculate result:
  var result=Math.max(getv('income') * 0.01 + (getv('property') 
           + getv('investments') - getv('debt'))*0.005, 150);
  // place the output into the target field:
  document.getElementById("PicExtPrice").value=result;

}

<FORM Name="myform">

<div>
 <label for="income">Yearly Income</label>
 <input id="income" type="text">
</div>

<div>
 <label for="property">Estimated Value of your Asstes (house, land, etc.)</label>
 <input id="property" type="text">
</div>

<div>
 <label for="investments">Estimated Value of Investments (stocks, bonds, IRA, etc.)</label>
 <input id="investments" type="text">
</div>

<div>
 <label for="debt">Estimated Debt (mortgage, loans, credit cards)</label>
 <input id="debt" type="text">
</div>

</FORM>

<button type="button" onclick="calculatePrice()">Calculate</button>

The new calculated price:<INPUT type="text" id="PicExtPrice" Size=8>

getv() 为给定的任何输入id返回浮点值。公式不变,但在最后一行中,您试图引用一个未定义的变量 total ,应该是什么时候 result .

另一个问题可能是一些引号,如 document.getElementById(âincome") â 是错误的,应该是简单的 " 相反

为了使计算更加“宽容”,我添加了 ||0 document.getElementById(id).value . 这个 0 现在,只要输入字段未被触动(并返回一个空字符串),就进行干预。我忍不住再次缩短了整个过程。谁需要个人变量 income , property 等等当主公式可以直接使用 getv()