Неопределенная функция с JavaScript

Question

Я пишу небольшой калькулятор котировок.Я хочу напечатать сводку в браузере с innerHTML, но я все еще получаю "undefined" вместо цены.Но в моем console.log все работает нормально, я могу console.log переменную цену и получить ожидаемый результат.

//Variables 

const form = document.getElementById('request-quote');
const html = new HTMLUI();

//Event Listeners 

eventListeners();

function eventListeners() {
  document.addEventListener('DOMContentLoaded', function() {
    //Create the <option> for the years
    html.displayYears();
  });
  //when the form is submitted

  form.addEventListener('submit', function(e) {
    e.preventDefault();

    //get values from the form
    const make = document.getElementById('make').value;
    const year = document.getElementById('year').value;

    //Read the radio buttons

    const level =
      document.querySelector('input[name="level"]:checked').value;

    // Validation
    if (make === '' || year === '' || level === '') {
      html.displayErrors('All fields are mendatory')
    } else {
      //Make the quotation
      const insurance = new Insurance(make, year, level);
      const price = insurance.calculateQuotation(insurance);
      //print
      html.showResults(price);
    }

  });
}
// Create another prototype with for the object HTMLUI. to print Errors

//Object 
// Everything related to the calculation and quotation

function Insurance(make, year, level) {
  this.make = make;
  this.year = year;
  this.level = level;
}

//calculation 

Insurance.prototype.calculateQuotation = function(insurance) {
  let price;
  const base = 2000;

  //get make
  const make = insurance.make;

  /**
   1. america: 15
   2. Asia : 5
   3. europia: 35
  */

  switch (make) {
    case '1':
      price = base * 1.15;
      break

    case '2':
      price = base * 1.05;
      break

    case '3':
      price = base * 1.35;
      break
  }

  //get level

  const level = insurance.level;

  price = this.calculateLevel(price, level);

  //get year

  const year = insurance.year;
  const difference = this.getYearDifference(year);
  price = price - ((difference * 3) * price) / 100;
  console.log(price);

}
//return difference between years

Insurance.prototype.getYearDifference = function(year) {
  return new Date().getFullYear() - year;
  // each year the cost must be 3% cheaper

}

//add value based on level

Insurance.prototype.calculateLevel = function(price, level) {
  //basic increase 30%

  //complete increases 50%
  if (level === 'basic') {
    price = price * 1.30;
  } else {
    price = price * 1.50;
  }
  return price;
}


function HTMLUI() {}
//display the latest 20 years in the select
HTMLUI.prototype.displayYears = function() {
  //Max & minimum years
  const max = new Date().getFullYear();
  min = max - 20;
  //Generate the list
  const selectYears = document.getElementById('year');

  //print the values

  for (let i = max; i >= min; i--) {
    const option = document.createElement('option')
    option.value = i;
    option.textContent = i;
    selectYears.appendChild(option);
  }
}

//Print Error, by creating a prototype

HTMLUI.prototype.displayErrors = function(message) {
  //create div
  const div = document.createElement('div');
  div.classList = 'error';

  //insert message
  div.innerText = `
    <p>${message}</p>
    `;

  form.insertBefore(div, document.querySelector('.form-group'));

  //Remove the error

  setTimeout(function() {
    document.querySelector('.error').remove();
  }, 3000);
}

HTMLUI.prototype.showResults = function(price) {
  //print result
  const result = document.getElementById('result');

  //create a div with the result

  const div = document.createElement('div');
  //insert the result
  div.innerHTML = `
    <p class="total">Total: $ ${price}</p>
    `;
  //insert into html

  result.appendChild(div)
}

Я ожидаю напечатать значение переменной цены (которая на самом деле будетцена) но я получаю "неопределено" при попытке распечатать цену

Answer 1

Показывает неопределенное, потому что вы никогда не возвращали результат. Вам нужно вернуть переменную 'price', чтобы исправить это.

...
  const difference = this.getYearDifference(year);
  price = price - ((difference * 3) * price) / 100;
  console.log(price);
  return price;
}

Answer 2

Вам необходимо добавить оператор return в функцию calculateQuotation.Вот почему, в случае, если это помогает.

Причина, по которой вы получаете undefined, заключается в том, что переменной price никогда не присваивается значение.

В этой строке:

const price = insurance.calculateQuotation(insurance);

price получает то, что функция calculateQuotation отправляет обратно с оператором return.Однако в этой функции вы просто заполняете переменную price, которая существует только в контексте этой функции.Я думаю, что для этого нужно добавить оператор return в конце функции calculateQuotation следующим образом:

Insurance.prototype.calculateQuotation = function(insurance) {
  let price;
  const base = 2000;

  //get make
  const make = insurance.make;

  /**
   1. america: 15
   2. Asia : 5
   3. europia: 35
  */

  switch (make) {
    case '1':
      price = base * 1.15;
      break

    case '2':
      price = base * 1.05;
      break

    case '3':
      price = base * 1.35;
      break
  }

  //get level

  const level = insurance.level;

  price = this.calculateLevel(price, level);

  //get year

  const year = insurance.year;
  const difference = this.getYearDifference(year);
  price = price - ((difference * 3) * price) / 100;
  console.log(price);
  return price; // Added this in
}