I have this code to split my text in different spans and that works perfectly.
But I have 2x texts with 2x classes:
<p class="MyClass1">FIRST TEXT</p>
<p class="MyClass2">SEC TEXT</p>
code:
const p = document.querySelector(".MyClass1";
let words = p.textContent.split(" ");
words = words.map((word) => {
let letters = word.split("");
letters = letters.map(
(letter) => `<span class="word_inner">${letter}</span>`
);
return letters.join("");
});
words = words.map((word) => `<span class="word">${word}</span>`);
p.innerHTML = words.join(" ");
How can I add a second .class in this code?
Use a function. Makes code reusable.
function createSpans(myClass) {
const p = document.querySelector(myClass);
let words = p.textContent.split(" ");
words = words.map((word) => {
let letters = word.split("");
letters = letters.map(
(letter) => `<span class="word_inner">${letter}</span>`
);
return letters.join("");
});
words = words.map((word) => `<span class="word">${word}</span>`);
p.innerHTML = words.join(" ");
}
createSpans(".MyClass1");
createSpans(".MyClass2");<p class="MyClass1">FIRST TEXT</p>
<p class="MyClass2">SEC TEXT</p>