Ja bym to zrobił tak.
Po pierwsze pobrałbym tekst, który wprowadzasz. Potem podzielił go na tablice i operował na pojedyńczych elementach tej tablicy:
function check()
{
const inputArray = document.getElementById("text").value.toString().split(' ');
inputArray.forEach((element, index) => {
console.log(index)
console.log(element)
})
}
Zobacz sobie jak to działa.
Teraz możesz sprawdzić za pomocą index'u czy index wyrazu jest parzysty lub czy jest 3 z kolei. Teraz z tego miejsca możesz odnosić się do elementu, który jest pojedynczym wyrazem w 'zdaniu'.
Twój problem polegał na tym, że nadpisywałeś poprzednią wartość:
document.getElementById("wynik").innerHTML=(slowo.fontcolor("red"));
Zamiast tego powinieneś użyć +=
Generalnie ten fragment ja bym zrobił tak:
if (index % 2) {
if ((index + 1) % 3) {
document.getElementById("result").innerHTML += `<span style='color: red;'>${element} </span>`;
} else {
document.getElementById("result").innerHTML += `<span style='color: red;'>${Array.from(element).reverse().join("").toString().toUpperCase()} </span>`;
}
} else {
if ((index + 1) % 3) {
document.getElementById("result").innerHTML += `${element.toUpperCase()} `
} else {
document.getElementById("result").innerHTML += `${Array.from(element).reverse().join("").toString().toUpperCase()} `
}
}
Twój cały kod wyglądałby wtedy tak:
<html>
<head>
</head>
<body>
<script>
function check() {
const inputArray = document.getElementById("text").value.toString().split(' ');
inputArray.forEach((element, index) => {
if (index % 2) {
if ((index + 1) % 3) {
document.getElementById("result").innerHTML += `<span style='color: red;'>${element} </span>`;
} else {
document.getElementById("result").innerHTML += `<span style='color: red;'>${Array.from(element).reverse().join("").toString().toUpperCase()} </span>`;
}
} else {
if ((index + 1) % 3) {
document.getElementById("result").innerHTML += `${element.toUpperCase()} `
} else {
document.getElementById("result").innerHTML += `${Array.from(element).reverse().join("").toString().toUpperCase()} `
}
}
})
}
</script>
Wpisz dowolny tekst: <input type="text" id="text">
<br>
<button id="b1" onclick='check()'>Wyślij</button>
<br>
<span id="result"></span>
</body>
</html>
Jest tam trochę nowości z ES6, więc jakbyś czegoś nie wiedział to pytaj.