Question 184110 in Html Question posted in
Some basic documentation can be found here.

Html – how to implement event listeners in mvc architecture js?

I am trying to make the ‘next’ button work using the MVC architecture but for some reason, I get no response when clicking on it.
I have imported the ‘nextQuestion’ function to controller.js as the ‘Publisher & subscriber design patterns’ suggests and nothing works.

///////// CONTROLLER //////////

const init = function () {
  nextQuestion(showQuestion);
};
init();

/////////// VIEW //////////////

export const nextQuestion = function (handler) {
  const nextQuestionBtn = document.querySelector(".next-btn");
  nextQuestionBtn.addEventListener("click", handler);
};

I have tried to place

" const nextQuestionBtn = document.querySelector(".next-btn"); "

in the global scope to troubleshoot but I get no response for my clicks.

tried so many different things, no success!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After using insertAjesentHtml, the button looses connection to the query selector supposedly. So I solved it with event delegation first but it seemed like a wrong way to do that. So I have abstracted the button from the insertAjesentHtml function so I wont insert it over and over again every time. hope it make sense.


  2. 0

    It should work, probably your controller isn’t seeing your view. Try logging something inside your nextquestion method and execute your controller if there will be any change.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search