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

JavaScript dodawanie ponumerowanych elementów li do listy ul

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
1,631 wizyt
pytanie zadane 28 lipca 2019 w JavaScript przez Tomyslav Nowicjusz (220 p.)
zmienione kategorie 28 lipca 2019 przez criss

Witam. Mam problem z moim zadaniem. Polega ono na tym aby po wciśnięciu strzałki w gore dodawało mi element li i go numerowało w górę, a po wciśnięciu strzałki w dół  dodawało element li i numerowało w dół.

Problem jest taki ze gdy dojadę np do "Element li = 3" to wciśniecie strzałki w dół tworzy kolejny element li o nr 3 a ma tworzyć "Element li = 2".

Wygląda to tak:

Element 1

Element 2

Element 3

Element 3

Element 2

A chciałbym by było tak:

Element 1

Element 2

Element 3

Element 2

Element 1

Oto co stworzyłem w JavaScript

const ul = document.body.querySelector('ul');
let numer = 1;

const addLi = (e) =>
{
    console.log(e.keyCode);
    if (e.keyCode === 38)
    {
        const li = document.createElement('li');
        li.textContent = `Element li = ${numer}`;
        ul.appendChild(li);
        numer ++;
    }
}

const reset = (re)=> 
{
    
    if (re.keyCode === 40)
    {
        --numer;
        const li = document.createElement('li');      
        li.textContent = `Element li = ${numer}`;
        ul.appendChild(li);
        
    }
}

window.addEventListener("keydown", addLi);
window.addEventListener("keydown", reset);

 

1 odpowiedź

0 głosów
odpowiedź 28 lipca 2019 przez BT101 Stary wyjadacz (12,540 p.)
edycja 28 lipca 2019 przez BT101
const ul = document.body.querySelector('ul');
let index = 0;

const update = (e) => {
  const li = document.createElement('li');
  if (e.keyCode === 38) index++;
  if (e.keyCode === 40) index--;
  li.textContent = `Element li = ${index}`;
  ul.appendChild(li);
}

window.addEventListener("keydown", update);

don't repeat yourself. live demo

natomiast w twoim kodzie w złym miejscu dekrementujesz zmienną numer

komentarz 28 lipca 2019 przez Tomyslav Nowicjusz (220 p.)
Dziękuje za odpowiedz, przeanalizuje kod który podesłałeś.

Podobne pytania

0 głosów
1 odpowiedź 176 wizyt
0 głosów
3 odpowiedzi 1,237 wizyt
0 głosów
2 odpowiedzi 600 wizyt
pytanie zadane 17 października 2019 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)

93,108 zapytań

142,085 odpowiedzi

321,607 komentarzy

62,449 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!

...