如何让我的代码从 javascript 计算一个值并在 html 中显示答案？

Question

I am trying to create code something that calculates the ddf (daily water flow) from a household based on the type of household, number of bedrooms, number of occupants, and floor area.

Right now I have completed the code for a single family with any number of bedrooms and occupants (no code for floor area yet and other types of homes). But it is not showing the answer or calculating it.

The if statements are based on guidelines for calculating water flow based on the info.

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

Answer 1

In order to get the input value, you should use .value

Also, you are using a single = as your operator, which will always return true. Should be if(residence == "single") .

It also looks like you are trying to get an element that doesn't exist in order to set the information. Try creating a tag with the Id ddf such as <p id=\\'ddf\\'><\\/p> .

You also have some typos in your code you should check. Many of these errors could be found with the console fairly quickly. You should get familiar with the Chrome Developer Console .

Answer 2

So, you've got some issues with your code.

(residence = single) returns error cause single is undefined.

You didn't create an element with ddf id.

The way to get value from inputs is .value() and not innerHTML .

You have typo's with getElementsById , should be 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>