CODEWITHSUNDEEP
javascripthtmljquerycssvar
Alex Lorimer
Alex Lorimer

Reputation: 23

I want each word that is being generated by var text to be within individual <span> tags

I currently generate text when my website loads here https://www.droolstudios.co.uk/home. I'm now making some changes and would like each individual work to generate within a <span></span>.

HTML

        var i = 0;
        var txt = 'Branding. Websites. Design & Creative Services. We turn your vision into reality.';
        //var txt = 'Turning your creative visions into reality with ease and care.... and we also do dog sitting.';

        function typeWriter() {
            if (i < txt.length) {
                document.getElementsByClassName('js-typewrite')[0].innerHTML += txt.charAt(i);
                i++;
                setTimeout(typeWriter, 95);
           
            }
        }

        setTimeout(typeWriter, 1000);
    <section>
            <div class="home-intro">
                <div class="sub-heading">
                    <span class="typewrite anim-typewrite js-typewrite"></span>
                </div>

            </div>
        </section>

Anyone have any ideas?

Upvotes: 0

Views: 61

Answers (2)

Frenchy
Frenchy

Reputation: 17027

i generate new var result with each word of var txt embbed by span tag, then you just generate your html where you want.

var txt = 'Branding. Websites. Design & Creative Services. We turn your vision into reality.';

var sp0 = txt.split(" "); // split by space

var result = sp0.map( (w) => "<span>" + w + "</span>").join("");
console.log(result)

the join command transforms the array in one line, if you want to keep an array, dont do that command

Upvotes: 2

Evren
Evren

Reputation: 4410

Are you looking for something like this?

        var i = 0;
        var txt = 'Branding. Websites. Design & Creative Services. We turn your vision into reality.';
        //var txt = 'Turning your creative visions into reality with ease and care.... and we also do dog sitting.';
        let splitted=txt.split(" ");

        function typeWriter() {
            if (i < splitted.length) {
                document.getElementsByClassName('js-typewrite')[0].innerHTML += splitted[i]+ " ";
                i++;
                setTimeout(typeWriter, 395);
           
            }
        }

        setTimeout(typeWriter, 1000);
    <section>
            <div class="home-intro">
                <div class="sub-heading">
                    <span class="typewrite anim-typewrite js-typewrite"></span>
                </div>

            </div>
        </section>

Upvotes: 0

Related Questions