Блог

В следующем коде я пытаюсь создать человеческий объект из данных формы. userData Объект возвращает неопределенные значения для всех значений, но я присваиваю значения функции, которая извлекает данные. Если я консоль.регистрируйте userData объект, который я вижу ‘{}’, затем при расширении я вижу значения, но после создания объекта human те же значения отображаются неопределенными. Как я могу назначить их values человеческому объекту, чтобы он сохранял эти значения? Спасибо.

 function Human(name, height, weight, diet) {
    this.name = name;
    this.height = height;
    this.weight = weight;
    this.diet = diet;
}
    
const btn = document.getElementById('btn');
const userData = {};
function getUserData() {
    let formContainer = document.getElementsByClassName('form-container')[0];

    formContainer.style.display = 'none';
    let main = document.getElementById('grid');
    main.style.display = 'flex';

    let name = document.getElementById('name').value;
    let feet = parseFloat(document.getElementById('feet').value);
    let inches = parseFloat(document.getElementById('inches').value);
    let height = (feet * 12)   inches;
    let weight = parseFloat(document.getElementById('weight').value);
    let diet = document.getElementById('diet').value;

    userData.name = name;
    userData.height = height;
    userData.weight = weight;
    userData.diet = diet;

}

console.log(userData);
// Create Human Object
const human = new Human(userData.name, userData.height, userData.weight, userData.display);
console.log(human);
  

Я думаю, вы могли бы вместо этого провести рефакторинг, чтобы сделать функцию getUserData() более повторно используемой.

 function getUserData() {

    let formContainer = document.getElementsByClassName('form-container')[0];
    formContainer.style.display = 'none';

    let main = document.getElementById('grid');
    main.style.display = 'flex';

    const name = document.getElementById('name').value;
    const feet = parseFloat(document.getElementById('feet').value);
    const inches = parseFloat(document.getElementById('inches').value);
    const height = (feet * 12)   inches;
    const weight = parseFloat(document.getElementById('weight').value);
    const diet = document.getElementById('diet').value;

    return {name, height, weight, diet}
}

const userData = getUserData()
const human = new Human(userData.name, userData.height, userData.weight, userData.diet);
  

Вы можете использовать класс JavaScript и метод конструктора для хранения ваших пользовательских данных data . Чтобы вы могли использовать доступ к своим данным через новый Human класс.

В идеале в modern JS вы хотите class функционировать вместо simple , поскольку это можно использовать повторно, а также просто, но это хорошая практика использования функции класса, поскольку это то, что вы тоже пытаетесь сделать.

Живая рабочая демонстрация:

 const btn = document.getElementById('btn');
let userData = {};

class Human {
  constructor(name, height, weight, diet) {
    this.name = name;
    this.height = height;
    this.weight = weight;
    this.diet = diet;
  }
}

function getUserData() {
  let name = document.getElementById('name').value;
  let feet = parseFloat(document.getElementById('feet').value);
  let inches = parseFloat(document.getElementById('inches').value);
  let height = (feet * 12)   inches;
  let weight = parseFloat(document.getElementById('weight').value);
  let diet = document.getElementById('diet').value;

  //Store to object
  userData.name = name;
  userData.height = height;
  userData.weight = weight;
  userData.diet = diet;
}

// call getUserData on button click
btn.addEventListener('click', function(e) {
  e.preventDefault()

  getUserData() //call function on click

  // Create Human Object
  const human = new Human(userData.name, userData.height, userData.weight, userData.diet);
  console.log(human); //create object

});  

 <form id="dino-compare">
  <div class="form-container">
    <p>Name:</p>
    <input id="name" class="form-field__full" type="name" name="name">
    <p>Height</p>
    <label>Feet: <input id="feet" class="form-field__short" type="number" name="feet"></label>
    <label>inches: <input id="inches" class="form-field__short" type="number" name="inches"></label>
    <p>Weight:</p>
    <label><input id="weight" class="form-field__full" type="number" name="weight">lbs</label>
    <p>Diet:</p>
    <select id="diet" class="form-field__full" name="diet">
      <option>Herbavor</option>
      <option>Omnivor</option>
      <option>Carnivor</option>
    </select>
    <button id="btn" onclick="getUserData(event)">Compare Me!</button>
  </div>
</form>  

Вы можете использовать метод jQuery serializaArray()

   function Human(name, height, weight, diet) {
      this.name = name;
      this.height = height;
      this.weight = weight;
      this.diet = diet;
  }

  (function ($) {
      $.fn.serializeFormJSON = function () {

          var o = new Human();
          var a = this.serializeArray();
          $.each(a, function () {
              if (o[this.name]) {
                  if (!o[this.name].push) {
                      o[this.name] = [o[this.name]];
                  }
                  o[this.name].push(this.value || '');
              } else {
                  o[this.name] = this.value || '';
              }
          });
          return o;
      };
  })(jQuery);

  $('form').submit(function (e) {
      e.preventDefault();
      var data = $(this).serializeFormJSON();
      console.log(data);
  });
  

скрипка:https://jsfiddle.net/mL32gvd0/1 /

потому что вы никогда не вызываете функцию getUserData

это может выглядеть следующим образом:

 getUserData();
console.log(userData);
const human = new Human(userData.name, userData.height, userData.weight, userData.display);
console.log(human);