• 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

Aruba Cloud - Virtual Private Server VPS
0 głosów
1,011 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 862 wizyt
0 głosów
3 odpowiedzi 4,420 wizyt
0 głosów
6 odpowiedzi 3,059 wizyt

93,337 zapytań

142,332 odpowiedzi

322,423 komentarzy

62,677 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...