JavaScript dodawanie ponumerowanych elementów li do listy ul

Question

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);

 

Answer 1

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

Comments

Dziękuje za odpowiedz, przeanalizuje kod który podesłałeś.