1

I am making a page that uses buttons to display the content when the creen is wider than 500px, and then it moves to an 'accordion' style layout when the screen is smaller than 500px. I am using event listeners and match media along with an if/else statement to determine which code to run.

However, when the code is run with a window of size less than 500px, then dragged out to make it bigger than 500px, the buttons are not responding to the 'onclick' when pressed and nothing happens.

Could somebody please advise where I am going wrong here?

Please see JSfiddle here

//Start listing variables for use in array.
var art1 = document.getElementById("article1");
var button1 = document.getElementById("list1");

var art2 = document.getElementById("article2");
var button2 = document.getElementById("list2");

var art3 = document.getElementById("article3");
var button3 = document.getElementById("list3");

var articleArray = [art1, art2, art3];
var buttonArray = [button1, button2, button3];



function mediaQuery(x) {
//If window is under 500px in width.
  if (x.matches) {
//Begin accordion code
   var initAccordion = function(accordionElement) {

    function handlePanelClick(event) {
    showPanel(event.currentTarget);
  }

  function showPanel(panel) {
  var expandedPanel = accordionElement.querySelector(".active");
  if (expandedPanel) {
        expandedPanel.classList.remove("active");
  }
  panel.classList.add("active");
  }

  var allPanelElements = accordionElement.querySelectorAll(".panel");
  for (var y = 0; len = allPanelElements.length; y++ ) {
        allPanelElements[y].addEventListener("click", handlePanelClick);
  }

 showPanel(allPanelElements[0]);

}
initAccordion(document.getElementById("contentWrapper"));

  } 
  else //If window if is over 500px in width.
  {
    //Begin button code.
    var createfunc = function (i) {
    return function() { document.getElementById("fillMe").innerHTML = articleArray[i].innerHTML;};
}


for (let i=0; i < articleArray.length; i++) {
let button = buttonArray[i];
button.addEventListener("click", createfunc(i));
}
  }
}


//Declare media query and add listener.
var x = window.matchMedia("(max-width: 500px)")
mediaQuery(x) // Call listener function at run time
x.addListener(mediaQuery) // Attach listener function on state changes
Tom M
  • 127
  • 2
  • 14
  • 1
    **Typo**: `for(var y = 0; len = allPanelElements.length; y++)` The second operand always evaluates to true, so you are going for an infinite loop, fortunately blocked before when you try to access `allPanelElements[allPanelElements.length].addEventListener` since this item is undefined and you can't access its `addEventListener` property. (Opening your dev console would have shown it to you, and the fix is obviously `for(var y = 0; y < allPanelElements.length; y++)` – Kaiido Jul 21 '18 at 13:17

0 Answers0