• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
743 wizyt
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ź

0 głosów
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?

komentarz 23 kwietnia 2020 przez MKolaj15 Bywalec (2,270 p.)
Tak tu przepraszam, pomyliłem się, ale na przykład 5 wyraz też wyświetla się na odwrót a ma być co 3
komentarz 23 kwietnia 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Tak wiem, tutaj był mój błąd. Już wszystko edytowałem i w odpowiedzi masz poprawny kod. 

U mnie działa on tak:

jeden dwa trzy cztery pięć sześć siedem osiem dziewięć dziesięć jedenaście dwanaście

JEDEN dwa YZRT cztery PIĘĆ ĆŚEZS SIEDEM osiem ĆĘIWEIZD dziesięć JEDENAŚCIE EICŚANAWD

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

Okej, widzę dziękuję bardzo za pomoc smiley

komentarz 23 kwietnia 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
Spoko nie wiem czy tam przy 6. jeszcze nie ma błedu ale to po prostu wywal toUpperCase() z if(index%2)

Podobne pytania

0 głosów
3 odpowiedzi 727 wizyt
0 głosów
3 odpowiedzi 4,131 wizyt
0 głosów
6 odpowiedzi 2,716 wizyt

92,840 zapytań

141,781 odpowiedzi

320,856 komentarzy

62,172 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...