Как в цикле сделать правильное отображение нескольких CodeMirror?

Вопрос-ответ JavaScript
1

Этот код добавляет повторно инфу только в первый блок:

window.onload = function(e) {
    document.querySelectorAll(".codemirror-textarea").forEach(el => {
        const [output] = document.querySelectorAll(".codemirror-textarea");
        const editor = CodeMirror.fromTextArea(output, {lineNumbers: true, readOnly: true});
    });}
2

Окей, давай разбирать построчно

1. window.onload = function(e) {
2.    document.querySelectorAll(".codemirror-textarea").forEach(el => {
3.        const [output] = document.querySelectorAll(".codemirror-textarea");
4.        const editor = CodeMirror.fromTextArea(output, {lineNumbers: true, readOnly: true});
5.    });}
  1. Все ок
  2. Ты хочешь взять список ДОМ-элементов и пройти по каждому элементу, и что-то с ним сделать. Но проблема в том, что .forEach - это метод массива, а querySelectorAll возвращает не массив, а NodeList, у которого нет метода .forEach. Чтобы это сработало, нужно превратить NodeList в Array.
  3. Почти полностью повторяет строку 2. Ты опять выбираешь список, но теперь оборачиваешь его в массив. Хотя на самом деле, как мне кажется, ты хотел наоборот, вытащить один элемент из списка. Эту строку можно выкинуть вообще, элемент, который тебе нужен, уже передается в forEach(el => {
  4. CodeMirror.fromTextArea хочет первым аргументом получить элемент textArea. То есть, один из .codemirror-text, один из элементов списка, который ты выбрал во второй строке. То есть тот самый el, который передает твой forEach. Кроме того, const editor нигде не используется, ее можно тоже выкинуть.

Суммируя все вот это вот, получается:

window.onload = function(e) {
    Array.from(document.querySelectorAll(".codemirror-textarea")).forEach(el => {
        CodeMirror.fromTextArea(el, {lineNumbers: true, readOnly: true});
    });}
2 лайка
3

Альтернативный вариант:

> window.onload = function(e) {
>     document.querySelectorAll(".codemirror-textarea").forEach(el => {
>         const editor = CodeMirror.fromTextArea(el, {lineNumbers: true, readOnly: true});
>     });
> }
4

Да, тоже вариант, но обрати внимание, что .forEach для NodeList работает не везде

1 лайк
5

Спасибо за развёрнутый ответ!

1 лайк