I am trying to submit the form but the page just get refresh after I hit the submit button and the event.preventDefault() doesn't seems to work.

class UI {
  constructor() {
    this.budgetForm = document.getElementById("budget-form");
  }

  //submit budget method
  budgetSubmitForm() {
    console.log('hello from es6');
  }
}

function eventListenters() {
  const budgetForm = document.getElementById("budget-form");
  const expenseForm = document.getElementById("expense-form");
  const expenseList = document.getElementById('expense-list');

  // New instance of UI class 
  const ui = new UI();
  // budgetForm submit 
  budgetForm.addEventListener('submit', function(event) {
    event.preventDefault()
    ui.budgetSubmitForm()
  });

  // expense form submit 
  expenseForm.addEventListener('submit', function(event) {
    event.preventDefault();
  });

// expense list click 
  expenseList.addEventListener('click', function() {
  });
}

document.addEventListener('DOMcontentLoaded', function() {
  eventListenters();
})

I will really appreciate someone helping me!