Присвоить функцию для каждого элемента массива

Question

Есть функция, которая посимвольно выводит текст в html. Как эту функцию присвоить для каждого элемента массива? Так не получается:
text_show[0].onmousemove = show_text; // вызов функции для первого элемента массива(Работает) text_show[1].onmousemove = show_text; // вызов функции для второго элемента массива(Не работает) Через цикл тоже не могу разобраться.

let source,
  dest,
  len,
  now = 0,
  letters = 1,
  text_show = document.querySelectorAll("section"); // массив секций

text_show[0].onmousemove = show_text; // вызов функции для первого элемента массива(Работает)
text_show[1].onmousemove = show_text; // вызов функции для второго элемента массива(Не работает)

// сама функция


function show_text() {
  source = document.querySelector(".pageTextSource");
  dest = document.querySelector(".pageText");
  len = source.innerHTML.length;
  show();
};

function show() {
  dest.innerHTML += source.innerHTML.substr(now, letters);
  now += letters;
  if (now < len) setTimeout("show()", 50);
};

<main>
  <section>
    <div style="display:none" class="pageTextSource">Наши проекты и результаты</div>
    <h2 class="pageText"></h2>
  </section>
  <section>
    <div style="display:none" class="pageTextSource">Отзывы</div>
    <h2 class="pageText"></h2>
  </section>
</main>

Answer 1

1-й вариант на JS

const $sections = document.querySelectorAll("section");
 // Перебираем все <section>
for (const $section of $sections) {
  // Вешаем событие на каждый <section>
  $section.onmouseenter = () => {
    const $source = $section.querySelector(".pageTextSource");
    const $visible = $section.querySelector(".pageText");
    showSectionLetters($source, $visible, 0);
  };
}

const showSectionLetters = ($source, $visible, marker) => {
  if ($visible.innerHTML.length === $source.innerHTML.length) return;
  // Добавляем 1 символ из $source в $visible
  // marker - текущая позиция символа
  $visible.innerHTML += $source.innerHTML[marker++];
  if ($visible.innerHTML.length < $source.innerHTML.length) {
    setTimeout(showSectionLetters, 50, $source, $visible, marker);
  }
}

<main>
  <section style='border: 1px solid red'>
    <div style="display:none" class="pageTextSource">Наши проекты и результаты</div>
    <h2 class="pageText"></h2>
  </section>
  <section style='border: 1px solid blue'>
    <div style="display:none" class="pageTextSource">Отзывы</div>
    <h2 class="pageText"></h2>
  </section>
</main>

2-й вариант на CSS

.pageTextSource {
  position: relative;
  display: block;
}
.pageTextSource::after {
  position: absolute;
  content: ' ';
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  transition: left 3s linear;
  pointer-events: none;
}
.pageTextSource:hover::after {
  left: 100%;
}

<main>
  <section style='border: 1px solid red'>
    <h2 class="pageTextSource">Наши проекты и результаты</h2>
  </section>
  <section style='border: 1px solid blue'>
    <h2 class="pageTextSource">Отзывы</h2>
  </section>
</main>

Answer 2

let now = 0,
  letters = 1,
  flag = true,
  text_show = document.querySelectorAll("section"); // массив секций
text_show.forEach(item => item.onmousemove = show_text);


function show_text() {
  if(flag){
    flag = false;
  } else {
    return;
  }
  now = 0;
  let source = this.querySelector(".pageTextSource");
  let dest = this.querySelector(".pageText");
  let len = source.innerHTML.length;
  show(source, dest, len);
};

function show(source, dest, len) {
  if (!dest) return;
  dest.innerHTML += source.innerHTML.substr(now, letters);
  now += letters;
  if (now < len) {
    setTimeout(() => show(source, dest, len, now), 50);
  } else {
    flag = true;
  }
};

<main>
  <section>
    <div style="" class="pageTextSource">Наши проекты и результаты</div>
    <h2 class="pageText"></h2>
  </section>

  <section>
    <div style="" class="pageTextSource">Отзывы</div>
    <h2 class="pageText"></h2>
  </section>
</main>

БЛОГ НА HUSL

Присвоить функцию для каждого элемента массива

Ответы (2 шт):