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 />