Javascript zmiana wyglądu wyrazów w tekście

pytanie zadane 23 kwietnia 2020 w JavaScript przez MKolaj15 Bywalec (2,270 p.)
zmienione kategorie 23 kwietnia 2020 przez MKolaj15

Cześć, muszę wykonać zadanie na zajęcia i mam z nim problem.

Treść: Stwórz skrypt, który umożliwi użytkownikowi wprowadzenie dowolnego tekstu oraz wyświetli ten tekst tak że: litery każdego nieparzystego wyrazu będą zamienione na wielkie, każdy parzysty wyraz będzie napisany w kolorze czerwonym, litery co trzeciego wyrazu będą napisane w odwrotnej kolejności.

Zacząłem już to robić, a mój problem polega na tym, że nie wiem jak traktować wyrazy w tekście oddzielnie. Dla przykładu, jeśli wpiszę jedno słowo składające się z 3 liter, wyświetli je dużymi, lecz jeśli wpiszę 2 słowa gdzie jedno ma parzystą ilość liter a drugie nieparzystą to wszystko wyświetla na czerwono.

Liczę na pomoc jak najprostszym sposobem, ponieważ nie jestem zbyt zaawansowany.

Mój kod:

<html>
<head>
</head>
<body>
<script>
function check() 
{
   var slowo=document.getElementById("tekst").value;
    if(slowo.length%2==1)
        {
            document.getElementById("wynik").innerHTML=(slowo.toUpperCase());
        }
    else if(slowo.length%2==0)
        {
            document.getElementById("wynik").innerHTML=(slowo.fontcolor("red"));
        }
}
</script>    

Wpisz dowolny tekst: <input type="text" id="tekst">
<br>
<button id="b1" onclick='check()'>Wyślij</button>
<br>
<span id="wynik"></span>

    
</body>

</html>

komentarz 23 kwietnia 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Java, to nie jest JavaScript.

1 odpowiedź

odpowiedź 23 kwietnia 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
wybrane 23 kwietnia 2020 przez MKolaj15

Najlepsza

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.

komentarz 23 kwietnia 2020 przez MKolaj15 Bywalec (2,270 p.)

Dzięki wielkie za nakierowanie i wyjaśnienie, lecz kod nie działa całkiem poprawnie z tego co sprawdzałem, ale myślę, że dzięki twojej odpowiedzi poradzę sobie.

komentarz 23 kwietnia 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

U mnie w pełni działał... Co tam nie trybi?

komentarz 23 kwietnia 2020 przez MKolaj15 Bywalec (2,270 p.)

Na przykład, 5 wyraz też wyświetla się odwrócony a np. kiedy 6 wyraz jest 3 literowy też wyświetla się na czerwono

komentarz 23 kwietnia 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Treść: Stwórz skrypt, który umożliwi użytkownikowi wprowadzenie dowolnego tekstu oraz wyświetli ten tekst tak że: litery każdego nieparzystego wyrazu będą zamienione na wielkie, każdy parzysty wyraz będzie napisany w kolorze czerwonym, litery co trzeciego wyrazu będą napisane w odwrotnej kolejności.

Gdzie w poleceniu jest mowa o tym że parzysty wyraz składający się z 3 liter ma nie być czerwony?