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

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

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

我看不到您所说的导致标记错误的下拉列表？请将其包括在内，并发布您收到的异常消息或确切的错误描述。如果您在同一页面上使用两个表单，则需要更改表单名称和函数名称。另一方面，您有一些非常重要的HTML问题，可能会影响某些浏览器中的功能，也可能不会影响这些功能，根据他们为您选择的修复方式：标记中没有标记，标记中有标记，但在和部分之外，缺少和标记的结束标记，等等。我强烈建议您在此处通过W3C验证程序运行HTML代码：并修复这些问题，以便您使用稳定的HTML代码。谢谢。我说错了-它不是选择值，而是一种最小值为2，最大值为6的数字输入类型。此外，我打算在两个单独的页面上使用两个单独的表格。谢谢你，伯吉！谢谢塔勒敏！我要试试验证器。我使用HTML站点生成器和自定义CSS，因此我的原始HTML非常弱！：另一方面，继续做好工作。你使用了一堆你很少看到的JavaScript，这向我表明你正在研究和做大量的尝试和错误，但没有很多指导。坚持下去，不断地问问题。这会变得容易些谢谢你是对的——做了大量的研究和尝试——这是一种有趣的学习方式；我也是这样做的。事实上，我这样做已经快20年了，每天都在学习新东西我还注意到数字的输入类型在除Chrome之外的任何浏览器中都不起作用。因为我想使用最小值和最大值，所以有点不高兴。有什么想法吗？输入2-6之间的单位数