Accordion in a chrome ext using vanilla JS

Question

I am looking to create a simple accordion within my chrome ext to display data. I am using the following JS tutorial but I seem to be struggling to register a click.

I have returned some data using the following:

//background.js

...

 // Looping through object's key value pair to place into divs
  for (const [key, value] of Object.entries(params)) {
    queryParams += `
      
        ${key}: ${value}
      
    `;
  }

return (completeData += `
    

      
        ${pixelType}
        
      



        ${pixelType}
        
      


      
        ${pixelUrl}
          ${queryParams}
      

    
 
  `);
...

I then have my logic in a separate file

//popup.js

document.addEventListener('DOMContentLoaded', function () {
  // get data
  document.getElementById('getCurrentURL').addEventListener('click', function () {
    chrome.runtime.sendMessage({}, function (response) {
      document.getElementById('data').innerHTML = response;
    });
  });

  // accordion code
  const elements = document.querySelectorAll('.element');

  elements.forEach((element) => {
    let btn = element.querySelector('.question button');
    let icon = element.querySelector('.question button i');
    var answer = element.lastElementChild;
    var answers = document.querySelectorAll('.element .answer');

    btn.addEventListener('click', () => {
      alert('clicked ');
      console.log('clicked');

      answers.forEach((ans) => {
        let ansIcon = ans.parentElement.querySelector('button i');
        if (answer !== ans) {
          ans.classList.add('hideText');
          ansIcon.className = 'fas fa-plus-circle';
        }
      });

      answer.classList.toggle('hideText');
      icon.className === 'fas fa-plus-circle'
        ? (icon.className = 'fas fa-minus-circle')
        : (icon.className = 'fas fa-plus-circle');
    });
  });
});

I am loading my scrips in like so...

popup.html



  
    

    
    
  
  

    

        HCP365 Debugger

If anyone can guide me in where I am going wrong here that would be great. I have also tried replicating the tutorial outside of a chrome ext and it works perfectly

File Structure

.
├── README.md
├── accordion.js
├── background.js
├── fa.js
├── images
│   ├── icon_128.png
│   ├── icon_16.png
│   ├── icon_32.png
│   └── icon_48.png
├── main.css
├── manifest.json
└── popup
    ├── popup.html
    └── popup.js

Update

I have found a repo where someone has created a simple calc. Within their popup.js they had something similar to

document.getElementById('clickBtn').addEventListener('click', () => {
    document.getElementById('textChange').innerHTML = 'hello i was clicked';
  });

I had a div in popup.html as well as the button. This worked fine when I clicked it.

I went on to add it like so...

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('getCurrentURL').addEventListener('click', function () {
    chrome.runtime.sendMessage({}, function (response) {
      document.getElementById('data').innerHTML = response;
    });
  });

  // new code here --------------------------------
  document.getElementById('btn').addEventListener('click', () => {
    document.getElementById('textChange').innerHTML = 'hello i was clicked';
  });
  // end ---
});

Using the dynamic button...and it didn't work! This is beyond frustrating now...at least we know it's a issue with the dynamic content.

user_600486 · Answer

You might need to add the listener to the document only after DOMContent has completely loaded. In the case of dynamic elements, you might have to add the onClick listener on the container of the elements

See example below:

// wait for the DOM to be loaded
document.addEventListener('DOMContentLoaded', function() {

  var checkPageButton = document.getElementById('checkPage');

  // add listener only after DOM loaded
  checkPageButton.addEventListener('click', function() {
    alert('clicked');
  }, false);
}, false);





  Tester
  



  Tester

user_10129053 · Answer

WOOHOO!! Done it!

I realised something, when I was posting the function inside

document.addEventListener('DOMContentLoaded', function () { ...

I was getting undefined, then I realsed the .btn only appears on once the content has loaded which is within...

document.getElementById('getCurrentURL').addEventListener('click', function () {
    chrome.runtime.sendMessage({}, function (response) {
      document.getElementById('data').innerHTML = response;

So I placed it as it is below.

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('getCurrentURL').addEventListener('click', function () {
    chrome.runtime.sendMessage({}, function (response) {
      document.getElementById('data').innerHTML = response;

      // ----------------------------------------------------------------
      const elements = document.querySelectorAll('.element');

      elements.forEach((element) => {
        let btn = element.querySelector('.question button');
        let icon = element.querySelector('.question button i');
        var answer = element.lastElementChild;
        var answers = document.querySelectorAll('.element .answer');

        btn.addEventListener('click', () => {
          answers.forEach((ans) => {
            let ansIcon = ans.parentElement.querySelector('button i');
            if (answer !== ans) {
              ans.classList.add('hideText');
              ansIcon.className = 'fas fa-plus-circle';
            }
          });

          answer.classList.toggle('hideText');
          icon.className === 'fas fa-plus-circle'
            ? (icon.className = 'fas fa-minus-circle')
            : (icon.className = 'fas fa-plus-circle');
        });
      });
      // end ---
    });
  });
});

and everything works as intended. Although I had to use let btn = element.querySelector('.question button'); instead of getting the button via it's ID as it would only work once

Accordion in a chrome ext using vanilla JS

File Structure

Update

2 Answers