Вам надо поместить переменную в глобальную область видимости.
То есть, код будет выглядеть примерно так:
const body = document.body;
const pageSliderButtons = Array.from(body.getElementsByTagName('a'));
const sections = Array.from(body.getElementsByTagName('section'));
let className;
sections.forEach((section, index) => {
className = section.className;
section.setAttribute('id', `#${className}`);
});
Но непонятно, для чего вам нужно выносить переменную в глобальную область видимости. Ведь forEach
будет перебирать все элементы, и после выполнения forEach
в переменной className
окажется НЕ значения всех .className
, а только значение .className
у последнего элемента.
Если вам нужно вынести все значения классов в глобальную область видимости, вам нужно:
- Создать пустой массив.
- В цикле
forEach
в каждой итерации выполнять добавление className
(класса) в массив классов.
- Потом после цикла
forEach
можно спокойно использовать массив с классами.
Это будет выглядеть примерно так:
const body = document.body;
const pageSliderButtons = Array.from(body.getElementsByTagName('a'));
const sections = Array.from(body.getElementsByTagName('section'));
// объявить массив имён классов для последующего заполнения
let classNames = [];
sections.forEach((section, index) => {
// получить само имя класса
const className = section.className;
// добавить (push) имя класса в массив
classNames.push(className);
// дальше можно делать всё, что вы хотите
section.setAttribute('id', `#${className}`);
});
И кстати, атрибут id
принимает значения только без #
, потому что он и так автоматически подставляется.
То есть, надо заменить:
section.setAttribute('id', `#${className}`);
на:
section.setAttribute('id', `${className}`);
(без #
в значение id
)
Я точно не уверен, отвечает ли это на поставленный вопрос, поэтому, если так, то прошу не минусовать, а объяснить, что я не прав, и конкретнее объяснить вопрос.