如何获取代码以从javascript计算值并以html显示答案？

问题描述

我正在尝试创建一些代码，以根据家庭类型，卧室数量，居住人数和建筑面积来计算家庭的ddf（每日水流量）。

现在，我已经完成了一个具有任意数量的卧室和居住者的单身家庭的代码（尚无关于建筑面积和其他类型房屋的代码）。但是它没有显示答案或没有计算出来。

if语句基于基于信息计算水流量的准则。

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

解决方法

为了获取输入值，您应该使用.value

此外，您正在使用单个=作为运算符，它将始终返回true。应该是if(residence == "single")。

您似乎还想获取一个不存在的元素来设置信息。尝试使用ID ddf创建标签，例如<p id=\'ddf\'><\/p>。

您的代码中也有一些错别字，应该检查。使用控制台可以很快找到许多这些错误。您应该熟悉Chrome Developer Console。

,

因此，您的代码遇到了一些问题。

(residence = single)返回错误原因，单个未定义。

您没有创建ID为ddf的元素。

从输入中获取价值的方法是.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>