Блог

Главная - Вопросы по программированию - Как мне заставить свой код вычислять значение из javascript и отображать ответ в html?

Как мне заставить свой код вычислять значение из javascript и отображать ответ в html?

#javascript #html #if-statement #calculation

#javascript #HTML #if-оператор #вычисление

Вопрос:

Я пытаюсь создать код, который вычисляет ddf (ежедневный расход воды) из домохозяйства на основе типа домохозяйства, количества спален, количества жильцов и площади этажа.

Прямо сейчас я завершил код для одной семьи с любым количеством спален и жильцов (пока нет кода для площади этажа и других типов домов). Но он не показывает ответ или не вычисляет его.

if Инструкции основаны на рекомендациях по вычислению расхода воды на основе информации.

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

Комментарии:

1. Проверьте свои операторы

2. Вы хотите .value вместо .innerHTML

3. Также это getElementById не getElementsById означает, что нет s , вы должны видеть ошибки в консоли по этому поводу. Среди других опечаток

4. Научитесь отлаживать. Браузер уже многое сообщает вам, когда сталкивается с проблемой, вам просто нужно узнать, что он пытается вам сказать, научившись понимать ошибки в консоли. Использование console может помочь вам увидеть, какие значения имеют ваши переменные и какие свойства или методы имеет объект. Это один из лучших инструментов, которые вы можете иметь как разработчик.

Ответ №1:

Итак, у вас есть некоторые проблемы с вашим кодом.

(residence = single) возвращает ошибку, потому что значение single не определено.

Вы не создали элемент с 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 amp;amp; occupants == 2 || occupants == null) {
    ddf=700;
  }
  if (bedrooms == 1 amp;amp; occupants > 2) {
    ddf=occupants*350;
  }
  if (bedrooms == 2 amp;amp; occupants == 3 || occupants == null) {
    ddf=1000;
  }
  if (bedrooms == 2 amp;amp; occupants > 3) {
    ddf=occupants*350;
  }
  if (bedrooms == 3 amp;amp; occupants == 3.75 || occupants == null) {
    ddf=1300;
  }
  if (bedrooms == 3 amp;amp; occupants > 3.75) {
    ddf=occupants*350;
  }
  if (bedrooms == 4 amp;amp; occupantss == bedrooms   0.5 || occupants == null) {
    ddf=1600 ((bedrooms-4)*300);
  }
  if (bedrooms => 4 amp;amp; 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 (mamp;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>

Ответ №2:

Чтобы получить входное значение, вы должны использовать .value

Кроме того, вы используете single = в качестве оператора, который всегда будет возвращать true . Должно быть if(residence == "single") .

Также похоже, что вы пытаетесь получить элемент, которого не существует, чтобы задать информацию. Попробуйте создать тег с идентификатором ddf , таким как <p id='ddf'></p> .

У вас также есть некоторые опечатки в вашем коде, которые вы должны проверить. Многие из этих ошибок можно довольно быстро найти с помощью консоли. Вы должны ознакомиться с консолью разработчика Chrome.