Logowanie

Problem w JS

pytanie zadane 23 kwietnia 2020 w JavaScript przez kuba1245677 Obywatel (1,080 p.)

Chce zamienić w "li" całe słowo w taki sposób ze kazda litera była w osobnym "span"

Problem jest następujacy że jeżeli użyje "this.innerHTML" to jakby wykonywala sie petla na danym slowie, a mam event ustawiony tak zeby funkcja wykonała sie raz po najechaniu na slowo,

a jak uzyje zamiast "this.innerHTML" "this.outerHTML" to znika mi event z danego słowa i nie mam pojecia jak to naprawić

<body>
  <div class="menu-inf">
    <ul>
      <li>Shop</li>
      <li>Lorem</li>
      <li>Projects</li>
      <li>About Us</li>
      <li>Contact</li>
    </ul>
  </div>
<script>
const words = document.querySelectorAll(".menu-inf ul li");
const animationLetters = function () {
    const letters = [...this.textContent];
    const span = [];
    letters.forEach(function (letter, index) {
        span[index] = letter.innerHTML = `<span>${letter}</span>`;
    });
    // this.outerHTML = `<li>${span.join("")}</li>`;
    this.innerHTML = span.join("");
    console.log(this)
};

words.forEach((word) => {
    word.addEventListener("mouseover", animationLetters);
});
</script>
</body>

Mam nadzieje że nie wytłumaczyłem chaotycznie

1 odpowiedź

odpowiedź 23 kwietnia 2020 przez DawidK Nałogowiec (37,910 p.)
wybrane 23 kwietnia 2020 przez kuba1245677

Najlepsza

Trochę kombinowane, ale możesz zrobić to tak:

- pobrać elementy li

- wyciągnąć z nich tekst i rozbić na litery przez split()

- wyzerować zawartość w li

Te trzy rzeczy robi pierwsza pętla w przykładzie.

- przeilterować przez wszystkie słowa a następnie litery

- utworzyć spany z tekstem (pojedynczymi literami)

- dodać do odpowiednich li

Te trzy rzeczy robi druga petla

Randomowe kolory do literek dodane są tylko po to żeby pokazać, że to osobne spany.

        const colors = ['red','blue','black','green'];
        const lis = document.querySelectorAll(".menu-inf ul li");
        const words = [];
        lis.forEach(li => {
            words.push(li.textContent.split(''));
            li.innerHTML = '';
        });
        words.forEach((word,index)  => {
            word.forEach(letter => {
                let span = document.createElement('span');
                span.textContent = letter;
                randomIndex = Math.floor(Math.random() * 5);
                span.style.color = colors[randomIndex];
                lis[index].append(span);
           })
        })

Podobne pytania

+1 głos

2 odpowiedzi 131 wizyt

Problem z js/css, proste pytanie.

pytanie zadane 8 października 2020 w JavaScript przez niezalogowany

0 głosów

1 odpowiedź 109 wizyt

Problem z otworzeniem skryptu js.

pytanie zadane 7 marca 2018 w JavaScript przez Reignover Nowicjusz (160 p.)

0 głosów

2 odpowiedzi 742 wizyt

[JS] Łączenie CSS i JS przy pracy na divach - problem

pytanie zadane 17 października 2016 w JavaScript przez Iamhexi Obywatel (1,330 p.)

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...

Problem w JS

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci