尝试使用Javascript在网站上显示一些简单的计算

时间:2013-03-15 16:12:28

标签: javascript forms calculated-field

我希望有人可以帮助我 - 我肯定是一个Javascript新手。我主要关注前端网站开发,但客户问我是否可以根据用户输入在线显示一些“成本”选项。我能够在第一次通过时取得成功,但是一旦我必须根据选择值进行计算,事情就会停止工作。

这是我的第一个传递,它适用于我的客户并正确计算,因为只有一个单位:

<script type="text/javascript"> 
function calcform() { 
    with (document.form1)
        { result.value = +number1.value * .75+ +number3.value} /*Calculates Option 1 One Year     Costs.*/
        { result2.value = +number1.value * .75+ +number3.value + +number3.value} /*Calculates     Option 1 Two Years.*/
        { result3.value = +number1.value * .75}/*Calculates Option 1 Leasing Fees.*/
        { result4.value = +number1.value * .08}/*Calculates Option 2 Leasing Fees.*/
        { result5.value = +number1.value * .08 *12 +500}/*Calculates Option 2 One Year Costs.*/
        { result6.value = +number1.value * .08 *24 +500}/*Calculates Option 2 Two Years.*/
    } 
</script> 
<table>
    <form name="form1" action=""> 
        <tr>
            <h5>Prospective Owners Cost Calculator:</h5><br/>
            <h4>Enter Your Anticipated Monthly Rent Here:<br/>
                <input type="text" id="number1" value="" size="20" />
            </h4><br/> 
            <input type="button" id="Calculate" value="Calculate" onclick="calcform()" />
            <input type="reset" id="reset" value=" Clear "/>
        </tr><br/>
        <tr>
            <td>
                <h4>
                    <strong>Option 1</strong>
                </h4><br/>
                <h4>Leasing Fee (75% of one month's rent):<br /> 
                    <input type="text" id="result3" value="" size="40" />
                </h4><br/>
                <h4>Monthly Management Fee (Fixed $79 x 12 months):<br />
                    <input type="text" id="number3" value="948" size="40" />
                </h4><br/> 
                <h4>Total First Year:<br /> 
                    <input type="text" id="result" value="" size="40" />
                </h4><br/> 
                <h4>Total After 2 Years (assuming lease renewal):<br />
                    <input type="text" id="result2" value="" size="40" />
                </h4><br/>
            </td>
            <br/><br/>
            <td>
                <br><br>
            </td>
            <td>
                <h4>
                    <strong>Option 2</strong>
                </h4><br/>
                <h4>Leasing Fee ($500 fixed):<br />
                    <input type="text" id="number5" value="500" size="40" />
                </h4><br/>
                <h4>Monthly Management Fee (8% of Gross Rents):<br />
                    <input type="text" id="result4" value="" size="40" />
                </h4><br/>
                <h4>Total First Year:<br />
                    <input type="text" id="result5" value="" size="40" />
                </h4><br/>
                <h4>Total After 2 Years (assuming lease renewal):<br />
                    <input type="text" id="result6" value="" size="40" />
                </h4><br/>
            </td> 
        </form>
    </table>

我正在尝试添加第二个表单,该表单将在不同的HTML页面上使用选择下拉列表来驱动其他计算,因此用户可以指示单元数,这将驱动不同的计算。告诉你 - 我是新手!非常感谢您的帮助!

<script type="text/javascript"> 
function calcform() 
{ 
with (document.form1) 

{ result1.value = +number1.value * .75}/*Calculates Option 1 Leasing Fees.*/
{ result2.value = +number3.value * +number2.value}/*Calculates Option 1 Mgmt Fees all     units.*/

} 
</script> 
<table><form name="form1" action=""> 
<tr><h5>Prospective Owners Cost Calculator:</h5><br/>

<h4>Enter Your Anticipated Monthly Rent Here (Total for all units):<br/>
<input type="text" id="number1" value="" size="20" /></h4><br/>

<h4>Enter the number of units (from 2-6)<br/>
<input type="number" name="number2" value="2" min="2" max="6"/></h4><br/> 

<input type="button" id="Calculate" value="Calculate" 
onclick="calcform()" /><input type="reset" id="reset" value=" Clear "/></tr>

<br/><tr><td><h4><strong>Option 1</strong></h4><br/>

<h4>Leasing Fee (75% of one month's rent):<br /> 
<input type="text" id="result1" value="" size="40" /></h4><br/> 

<h4>Monthly Management Fee per unit (Fixed[enter link description here][1] $69 x 12 months):<br /> 
<input type="text" id="number3" value="828" size="40" /></h4><br/> 

<h4>Monthly Management Fee all units:<br /> 
<input type="text" id="result2" value="" size="40" /></h4><br/>
</form> </table>

您可以在dev1.beastlyweb.com上看到此信息。我还在那里上传了Excel电子表格,其中包含客户希望在线复制的计算。

1 个答案:

答案 0 :(得分:0)

看起来计算失败了,因为您将name="number2"放入“输入单位数(2-6)”而不是id="number2"的输入中。您在计算中id正在调用该字段+number2.value