JavaScript的如何做一个区域计算与HTML表格

Question

我需要计算一个房间的面积，我找不到是我的代码中的问题。更具体地说，我需要调用表单中的值，当我按下提交按钮时，我想根据我的计算打印房间的面积。

也getElementById似乎不工作，我不知道为什么。

function area() { 
 
    var perimeter = document.getElementById("PE").value; 
 
    var height = document.getElementById("He").value; 
 
    var doors = document.getElementById("Nd").value; 
 
    var doors_w_par = doors * 5.0212; 
 
    var windows = document.getElementById("Nw").value; 
 
    var windows_w_par = windows * 2.488; 
 
    var closets = document.getElementById("Nc").value; 
 
    var closets_w_par = closets * 1.37; 
 
    var areas = (perimeter * height) - doors_w_par - windows_w_par - closets_w_par; 
 
    return areas; 
 
} 
 
console.log(area());

<form action="" method="POST" id="myForm"> 
 
    Perimeter: 
 
    <input type="float" min="0" max="9999999999999" id="Pe" name="P" /> 
 
    <br/>height: 
 
    <input type="float" min="0" max="9999999999999" id="He" name="H" /> 
 
    <br />doors: 
 
    <input type="number" min="0" max="9999999999999" id="Nd" name="D" /> 
 
    <br />windows: 
 
    <input type="number" min="0" max="9999999999999" id="Nw" name="W" /> 
 
    <br />closets: 
 
    <input type="number" min="0" max="9999999999999" id="Nc" name="C" /> 
 
    <br /> 
 
    <input type="submit" value="calc" name="sub" id="subm" onClick="testResults(this.form)"> 
 
</form> 
 
<br />

Answer 1

1. 直到形式存在
2. 你需要不使用一个提交按钮，而是一个类型=“按钮”
3. PE为PE不能调用区域的形式
4. 我不相信表单元素可以有type =“float” - “number”是您可能想要的或“文本”或将step属性添加到数字
5. 您需要解析返回的值取决于计算你让
6. 使用toFixed（小数）四舍五入的结果

function area() { 
 
    var perimeter = document.getElementById("Pe").value; 
 
    perimeter = isNaN(perimeter)||perimeter==""?0:parseFloat(perimeter); 
 
    var height = document.getElementById("He").value; 
 
    height = isNaN(height)||height==""?0:parseFloat(height) 
 
    var doors = document.getElementById("Nd").value; 
 
    doors=isNaN(doors)||doors==""?0:parseInt(doors,10); 
 
    var doors_w_par = doors * 5.0212; 
 
    var windows = document.getElementById("Nw").value; 
 
    windows=isNaN(windows)||windows==""?0:parseInt(windows,10); 
 
    var windows_w_par = windows * 2.488; 
 
    var closets = document.getElementById("Nc").value; 
 
    closets=isNaN(closets)||closets==""?0:parseInt(closets,10); 
 
    var closets_w_par = closets * 1.37; 
 
    var areas = (perimeter * height) - doors_w_par - windows_w_par - closets_w_par; 
 
    return areas.toFixed(2); 
 
} 
 
window.onload=function() { 
 
    document.getElementById("subm").onclick=function() { 
 
    console.log(area()); 
 
    } 
 
}

<form action="" method="POST" id="myForm"> 
 
    Perimeter: 
 
    <input type="number" step="0.01" min="0" max="9999999999999" id="Pe" name="P" /> 
 
    <br/>height: 
 
    <input type="number" step="0.01" min="0" max="9999999999999" id="He" name="H" /> 
 
    <br />doors: 
 
    <input type="number" min="0" max="9999999999999" id="Nd" name="D" /> 
 
    <br />windows: 
 
    <input type="number" min="0" max="9999999999999" id="Nw" name="W" /> 
 
    <br />closets: 
 
    <input type="number" min="0" max="9999999999999" id="Nc" name="C" /> 
 
    <br /> 
 
    <input type="button" value="calc" name="sub" id="subm" /> 
 
</form> 
 
<br />