1

Проблема:

Есть текст, который нужно изменить, желательно через цикл.

Пытаюсь сделать эффект написания. Есть строка, и мне нужно сделать так, что бы на место значения слова, подставилась первая буква этого слова. Пытаюсь сделать цикл, с помощью которого, будут выставляться все буквы, находившиеся в этом слове по порядку.

  let btn = document.querySelector(".btn"),
      title = document.querySelector(".title");

btn.addEventListener("click", () => {
  let anyString = title.textContent;
  for (let i = 0; i <= anyString.length; i++) {
    title.innerHTML = anyString.substring(0, i);
  }

});

Можете, пожалуйста, разъяснить ошибку. Пытался через преобразование в String сделать, не помогло.

2
  • Что значит "выставляться"? Сами автоматически, как печатающийся текст, или по одной букве при нажатии на кнопку?
    – UModeL
    Commented 17 февр. 2021 в 9:52
  • 1
    Да, как автоматически печатающийся текст. @UModeL
    – ioriSempai
    Commented 17 февр. 2021 в 10:11

1 ответ 1

3

Код у Вас рабочий, но из-за того, что скрипт выполняется почти мгновенно, создаётся обратное впечатление. В этом легко убедиться, если подставить другой текст:

let btn = document.querySelector(".btn"),
  title = document.querySelector(".title");

btn.addEventListener("click", () => {
  //let anyString = title.textContent;
  let anyString = 'boom';

  for (let i = 0; i <= anyString.length; i++) {
    title.innerHTML = anyString.substring(0, i);
  }
});
<h1 class="title">title</h1>
<button class="btn">button</button>

Чтобы замедлить вывод символов, нужно добавить задержку:

let btn = document.querySelector(".btn"),
  title = document.querySelector(".title");

btn.addEventListener("click", fTypeText);

function fTypeText() {
  let anyString = title.textContent;
  let i = 1;
  let fType = function() {
    if (i <= anyString.length) {
      title.innerHTML = anyString.substring(0, i);
      setTimeout(arguments.callee, 200);
    }
    i++;
  }
  fType();
};
<h1 class="title">Печатающийся текст</h1>
<button class="btn">button</button>

А вот если добавить анимацию, то задержку можно реализовать по-другому:

let btn = document.querySelector(".btn"),
  title = document.querySelector(".title");

btn.addEventListener("click", fTypeText);

function fTypeText() {
  let anyString = title.textContent;
  title.innerHTML = '';
  let i = 0;
  let fType = function() {
    if (i < anyString.length) {
      title.insertAdjacentHTML('beforeend', `<span>${anyString[i]}</span>`);
    }
    i++;
  }
  title.addEventListener("animationend", fType);
  fType();
};
.title span {
  display: inline-block;
  white-space: pre;
  animation: type .2s ease-in;
}

@keyframes type { 60%, 70% { transform: scale(2); } }
<h1 class="title">Печатающийся текст</h1>
<button class="btn">button</button>

2
  • 1
    Привет, в общем ответ действительно хорош, но я столкнулся с трудностями. Я не понимаю некоторые строки, начиная с функции fType, а именно, вот это: title.insertAdjacentHTML('beforeend', <span>${anyString[i]}</span>); И у меня почему то возникли трудности в обратную сторону сделать печать, хотя по логике должно работать. Заранее спасибо за ответ, я просто новичок в скриптах.
    – ioriSempai
    Commented 17 февр. 2021 в 17:13
  • 1
    А, все сделал, просто у меня колбэк стоял не там :))))
    – ioriSempai
    Commented 17 февр. 2021 в 17:39

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.