将类添加到特定的多个SPAN

Question

I want to add class to multiple SPAN (but not all SPAN). In this case i'm choosing to add class to last 2 SPAN's.

So currently my code is taking a string and then inserting each letter as SPAN in html.

So then i want the code to read the last 2 (or any other amount) of span to add another .class (in this case .blue)

I believe this is part of the code i need to use, but because i'm doing += it add another extra SPAN to html which is causing duplicates.

if (i >= 5) {
    html += '<span class="blue blast">' + split[i] + '</span>';
}

Full code here and CodePen:

function myFunction() {
    var string = document.querySelector('.title').innerHTML
    var split = string.split('');
    var html = '';

    for (let i = 0; i < split.length; i++) {
        html += '<span class="blast">' + split[i] + '</span>';

        if (i >= 5) {
            html += '<span class="blue blast">' + split[i] + '</span>';
        }

    }

    document.querySelector('.title').innerHTML = html;
}
myFunction()

https://codepen.io/MariusZMM/pen/MZdpNb

I already have jQuery code that does this for me. But i want to learn Vanila JavaScript.

Update: with the help from tymeJV i have updated CodePen with a fix: https://codepen.io/MariusZMM/pen/pqmwgL

Answer 1

You only want to write the blue letters when i > 5 - so wrap the other portion in an else block

    if (i >= 5) {
        html += '<span class="blue blast">' + split[i] + '</span>';
    } else {
        html += '<span class="blast">' + split[i] + '</span>';
    }

Answer 2

This is my proposition:

function myFunction(num) {
  const splitted = document.querySelector('.title').innerHTML.split('');

  const newContent = splitted.map((letter, i) => {
    const className = i >= splitted.length - num ? 'blue blast' : 'blast';

    return '<span class="'+className+'">' + letter + '</span>';
  }).join('');

  document.querySelector('.title').innerHTML = newContent;
}

myFunction(3);