javascript - 尝试使用 Javascript 进行一些简单的计算以显示在网站上

Question

我希望有人能帮助我 - 我肯定是一个 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 电子表格，其中包含客户想要在线复制的计算结果。

Answer 1

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