Консоль пишет Error: Promised response from onMessage listener went out of scope как исправить ошибку?

Question

[Shalindor]

btn.forEach(btn => {
   btn.addEventListener("click", () => {
      if (content.classList.contains("content--hidden")) {
         btn.textContent = "Скрыть";
      } else {
         btn.textContent = "Показать ещё";
      }
   });

});
const content = document.querySelectorAll(".content");
content.forEach(content => {
   content.addEventListener("click", () => {
      if (btn.textContent = "Показать ещё") {
         content.classList.add("content--hidden");
      } else {
         content.classList.remove("content--hidden");
      }

   });

});

Изначально код был рабочий но он работал только для одного элемента а мне нужно чтобы для всех элементов чьи классы там описаны вот cсылка на Code Pen где полностью рабочий скрипт только для одного элемента https://codepen.io/shalindor/pen/WNzwzKW

Comments

[dollar]

Для начала оформить код через <code></code>

[Shalindor]

dollar, Сделано

[GeminiX]

1. У вас content используется до того, как объявлен и одинаково назван для массива и одного элемента
2. btn не массив
3. может ссылку на нерабочий пример с ошибкой?

[Сергей Сергей]

Приведённый код не связан с ошибкой.

[Shalindor]

Александр, Сергей Сергей, этим кодом я пытался переписать этот скрипт:

const btn = document.querySelector(".btn");
const content = document.querySelector(".content--visible");

btn.addEventListener("click", btnClick);

function btnClick() {
   console.log(content.classList);

   if (content.classList.contains("content--hidden")) {
      btn.textContent = "Скрыть";
   } else {
      btn.textContent = "Показать ещё";
   }

   content.classList.toggle("content--hidden");
}

что бы работал со всеми элементами с нужными классами а не с одним так как нужно этот функционал использовать на странице несколько раз . Он должен при нажатии на кнопку у элемента с классом content--visible убирать класс content--hidden и если у него нету класса content--hidden то должно меняться текст кнопки. При использовании на одном элементе он полностью рабочий но мне нужно сделать несколько блоков с этим скриптом. Если коротко то это кнопка показать ещё которая показывает скрытые элементы и в кнопке меняется текст показать ещё на скрыть и обратно про при каждом клике. Вот ссылка на code pen где код который описанный в вопросе: https://codepen.io/shalindor/pen/zYWqbMB
здесь: https://codepen.io/shalindor/pen/WNzwzKW рабочий вариант если сможете сделать что бы он обращался ко всем элементам с нужным классом а не только к первому буду очень благодарен так как это то что мне нужно.
Когда использую вариант где работает один элемент то ошибки нет, но к сожалению нужно чтобы работало на всех элементах с классом.

[Сергей Сергей]

и причём тут промисы?

[Shalindor]

Сергей Сергей, когда делаю действие при котором по идее должен заработать скрипт консоль в браузере выдаёт эту ошибку

[Сергей Сергей]

пример на несколько кнопок вообще не работает, до промиса ещё далеко.

[Shalindor]

Сергей Сергей, Можете тогда пожалуйста подсказать как переделать пример который работает на один элемент что бы он работал на все элементы с нужным классом?

[Сергей Сергей]

Подсказываю:
Нужно сопоставлять конкретные элементы друг с другом, события конкретной кнопки и действия с конкретными блоками.

[Shalindor]

Сергей Сергей, можете пояснить это кодом ?

[Сергей Сергей]

Это будет реализация, а не подсказка.

[Shalindor]

Сергей Сергей, реализуйте этот скрипт пожалуйста

[Сергей Сергей]

Для этого нужно оформить другой вопрос, не про промисы. А там и реализаторы найдутся.

[Сергей Сергей]

Возвращаемся к началу

Приведённый код не связан с ошибкой.

background.js относится к проекту?