Проблема в функции: appendchild не является функцией - PullRequest
Новая
       65

Проблема в функции: appendchild не является функцией

0 голосов
/ 08 апреля 2020

Я хочу сделать анимацию для текста, и мне нужно разделить каждую букву.

Это работает: 

let hero = document.querySelector('.hero');
let text = hero.textContent;
hero.textContent = '';
let letters = text.split('');
letters.forEach((letter) => {
    let newSpan = document.createElement('span');
    let newContent = document.createTextNode(letter);
    newSpan.appendChild(newContent);
    if (newSpan.textContent == ' ') {
        newSpan.style.marginRight = '5px';
        newSpan.style.marginLeft = '5px';
    }
    hero.appendChild(newSpan);
});
<div class="hero">My awesome sentence</div>

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

let spanifyText = (sentenceDiv) => {
    let text = sentenceDiv.textContent;
    sentenceDiv = '';
    let letters = text.split('');
    letters.forEach((letter) => {
        let newSpan = document.createElement('span');
        let newContent = document.createTextNode(letter);
        newSpan.appendChild(newContent);
        if (newSpan.textContent == ' ') {
            newSpan.style.marginRight = '5px';
            newSpan.style.marginLeft = '5px';
        }
        sentenceDiv.appendChild(newSpan);
    });
};

let hero = document.querySelector('.hero');

spanifyText(hero);
<div class="hero">My awesome sentence</div>

Это, конечно, новая проблема ie, но не может ее решить.

Любая помощь, пожалуйста?

Спасибо заранее

1 Ответ

0 голосов
/ 09 апреля 2020

Спасибо за указание на проблему! Просто изменили html, добавив диапазон с классом для исходного текста, а затем удалив его в конце функции. Код, конечно, можно улучшить, но он делает свою работу! 

let spanifyText = (sentenceDiv) => {
    let originalSpan = sentenceDiv.querySelector('.original-span');
    let text = sentenceDiv.textContent;
    let letters = text.split('');
    letters.forEach((letter) => {
        let newSpan = document.createElement('span');
        let newContent = document.createTextNode(letter);
        newSpan.appendChild(newContent);
        if (newSpan.textContent == ' ') {
            newSpan.style.marginRight = '5px';
            newSpan.style.marginLeft = '5px';
        }
        sentenceDiv.appendChild(newSpan);
    });
    originalSpan.parentNode.removeChild(originalSpan);
};

let hero = document.querySelector('.hero');
spanifyText(hero);
<div class="hero"><span class="original-span">My Awesome Text</span></div>
...