Блог

Итак, я пытаюсь поместить значения созданного объекта-участника в пустой массив, как показано в функции submitForm внутри моего класса ManageContestant. Я зарегистрировал массив в своей консоли, чтобы посмотреть, есть ли какие-либо текущие значения, но, похоже, это просто пустой экземпляр объекта-участника без значений. Изначально это работало, когда мой код был отдельным и не помещался внутри созданного мной недавно созданного класса ManageContestant.

Однако я внес это изменение, потому что прочитал, что практика создания переменных в глобальном пространстве не рекомендуется? и это просто показалось мне неправильным, поэтому я бы предпочел пустой массив внутри моего класса ManageContestant или, если будут какие-либо другие предложения, кто-нибудь мог бы порекомендовать создать лучший код. Я предоставлю рабочий код без класса ManageContestant для лучшего контекста, а также нерабочий код.

codesandbox

Значения консоли:

Успешное перемещение участников в массив

Данные объекта не отображаются, когда я нажимаю стрелку, используя класс ManageContestant

Рабочий код отсутствует класс ManageContestant

 
class Contestant {
  constructor(name, age, location, song, link){
      this.name = name;
      this.age = age;
      this.location = location;
      this.song = song;
      this.link = link;
  }

}

const contestantDataArray =[];

document.querySelector(".regoForm").addEventListener('submit', 
function(e){


// Instantiate Contestant - create an instance

   // Get values from contestant rego form
const name = document.querySelector("#contName").value,
age = document.querySelector("#contAge").value,
location = document.querySelector("#contLocation").value,
song = document.querySelector("#song").value,
link = document.querySelector("#link").value;
const contestant = new Contestant(name, age, location, song, link);

contestantDataArray.push(contestant);

Store.addContestant(contestant);

}

  e.preventDefault();
  
}); 
  

Код для исправления с использованием класса ManageContestant

 
class Contestant {
    constructor(name, age, location, song, link){
        this.name = name;
        this.age = age;
        this.location = location;
        this.song = song;
        this.link = link;
    }

}

class ManageContestant{
    constructor(){
         // pass the data in the profileIterator function
         this.contestantDataArray = [];
        this.events();
    }



//Events
events() {
    // Create event for next button
    document.querySelector(".regoForm").addEventListener('submit', () => this.submitForm())
}


//Methods

submitForm(){

let array = this.contestantDataArray;
 
   
     // Add contestant to list
 ui.addContestantToList(contestant);
 
// THE PROBLEM IS HERE, THE ARRAY IS NOT GETTIN ANY VALUES OF THE CONTESTANT OBJECT BEING PUSHED

 array.push(contestant);
 
 
 Store.addContestant(contestant);
 
     
 };
}