如何讓我的代碼從 javascript 計算一個值並在 html 中顯示答案？

Question

我正在嘗試創建代碼，根據家庭類型、卧室數量、居住人數和建築面積計算家庭的 ddf（每日水流量）。

現在我已經完成了具有任意數量卧室和居住者的單個家庭的代碼（尚無建築面積和其他類型房屋的代碼）。 但它沒有顯示答案或計算它。

if語句基於根據信息計算水流量的准則。

 bedrooms=document.getElementsById("bedrooms").innerHTML;

Answer 1

為了獲得輸入值，您應該使用.value

此外，您使用單個=作為您的運算符，它將始終返回 true。 應該是if(residence == "single") 。

看起來您還試圖獲取一個不存在的元素以設置信息。 嘗試使用 Id ddf創建標簽，例如<p id=\\'ddf\\'><\\/p> 。

您的代碼中也有一些拼寫錯誤，您應該檢查一下。 使用控制台可以很快找到其中的許多錯誤。 您應該熟悉Chrome 開發者控制台。

Answer 2

所以，你的代碼有一些問題。

(residence = single)返回錯誤原因 single 未定義。

您沒有使用ddf id 創建元素。

從輸入中獲取值的方法是.value()而不是innerHTML 。

你有getElementsById錯字，應該是getElementById 。

 function calcDDF() { var ddf=0; let bedrooms=document.getElementById("bedrooms").value; let occupants=document.getElementById("occupants").value; let residence=document.getElementById("residence").value; if (residence == 'single') { if (bedrooms == 1 && occupants == 2 || occupants == null) { ddf=700; } if (bedrooms == 1 && occupants > 2) { ddf=occupants*350; } if (bedrooms == 2 && occupants == 3 || occupants == null) { ddf=1000; } if (bedrooms == 2 && occupants > 3) { ddf=occupants*350; } if (bedrooms == 3 && occupants == 3.75 || occupants == null) { ddf=1300; } if (bedrooms == 3 && occupants > 3.75) { ddf=occupants*350; } if (bedrooms == 4 && occupantss == bedrooms + 0.5 || occupants == null) { ddf=1600+((bedrooms-4)*300); } if (bedrooms => 4 && occupants > bedrooms + 0.5) { ddf=occupants*350; } } document.getElementById("ddf").innerHTML = ddf; }

 <input type="number" id="bedrooms" placeholder="Number of Bedrooms" /> <input type="number" id="occupants" placeholder="Number of Occupants" /> <input type="number" id="area" placeholder="Floor Area (m&sup2)"/> <select name="type of residence" id="residence"> <option value=""disabled selected>Select the Type of Residence</option> <option value="single">Single Family Dwelling</option> <option value="multi">Multi Family</option> <option value="luxury">Luxury Home</option> <option value="cottage">Seasonal Cottage</option> <option value="mobile">Mobile Home</option> </select> <button onclick="calcDDF()">Calculate DDF</button> <br> <p id="ddf"></p>