Can anyone identify the error in that code?

Question

A few days ago I asked a question about how to add class to an elemetho by clicking the button, the answers were satisfactory (I did it using Jquery as suggested), but I decided to create a function using pure javascript only (for study purposes), only there was a bug in the middle of the way and I could not solve, is that someone can find the bug in this code?

sessionStorage.removeItem('Contar');
function AddClass(id){
    //pega o valor do botao
    var tipo = document.getElementById(id).value;
    //pegar o item da lista
    var iten = document.getElementsByTagName('li');
    //cria uma sessão para gravar os valores dos cliques
    if(typeof(Storage)!=="undefined"){
        if(sessionStorage.Contar){
            if(tipo == 'proximo'){
                sessionStorage.Contar=Number(sessionStorage.Contar)+1;
                if(sessionStorage.Contar == iten.length){
                    sessionStorage.Contar=5;
                }
            }else 
            if(tipo == 'anterior'){
                sessionStorage.Contar=Number(sessionStorage.Contar)-1;
                if(sessionStorage.Contar == 0){
                    sessionStorage.Contar=0;
                }
            }
        }else{
            sessionStorage.Contar=0;
        }
    }
    //resgata o valor da sessão
    var valor = sessionStorage.Contar
    if(tipo == 'proximo'){
        if(valor > 0){
            //remove a classe do item anterior
            iten.item(valor-1).removeAttribute('class');
        }
    }else 
    if(tipo == 'anterior'){
        if(valor < 5){
            //remove a classe do item anterior
            iten.item(valor+1).removeAttribute('class');
        }
    }
    //adiciona classe ao próximo item
    iten.item(valor).setAttribute('class', 'selected');
    }

My html is this:

    <button onClick="AddClass('anterior');" id="anterior" value='anterior'>anterior</button>
<button onClick="AddClass('proximo');" id="proximo" value='proximo'>proximo</button>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

I didn’t post on Jsfidle because on my machine the site is getting all buggy as you can see here:

Answer 1

The mistake is in that part:

if(tipo == 'anterior'){
  sessionStorage.Contar=Number(sessionStorage.Contar)-1;
  if(sessionStorage.Contar == 0){
    sessionStorage.Contar=0;
  }
}

the if should be equal to -1 and not 0. the correct would be:

if(tipo == 'anterior'){
  sessionStorage.Contar=Number(sessionStorage.Contar)-1;
  if(sessionStorage.Contar == -1){
    sessionStorage.Contar = 0;
  }
}

What happens is that when Count is subtracted 1, 0-1 = -1 and not 0, as its logic proposed. That’s what I saw, just looking at the code from above.

Answer 2

In addition to counter error, it is happening that when you recover the "counter" on the line var valor = sessionStorage.Contar it ends up returning the number as text, so when you try to do valor+1 he does "1" + 1 and that of "11" and on your list there is no item("11") therefore the null.

I used the parseInt to resolve this. Follow the code with the counter changes as well.

function AddClass(id) {
    //pega o valor do botao
    var tipo = document.getElementById(id).value;
    //pegar o item da lista
    var iten = document.getElementsByTagName('li');
    //cria uma sessão para gravar os valores dos cliques
    if(typeof(Storage)!=="undefined"){
        if(sessionStorage.Contar){
            if(tipo == 'proximo'){
                sessionStorage.Contar=Number(sessionStorage.Contar)+1;
                if(sessionStorage.Contar == iten.length){
                    sessionStorage.Contar = iten.length - 1;
                }
            }else 
            if(tipo == 'anterior'){
                sessionStorage.Contar=Number(sessionStorage.Contar)-1;
                if(sessionStorage.Contar < 0){
                    sessionStorage.Contar=0;
                }
            }
        }else{
            sessionStorage.Contar=0;
        }
    }
    //resgata o valor da sessão
    var valor = parseInt(sessionStorage.Contar);
    if(tipo == 'proximo'){
        if(valor > 0){
            //remove a classe do item anterior
            iten.item(valor-1).removeAttribute('class');
        }
    }else 
    if(tipo == 'anterior'){
        if(valor < iten.length){
            //remove a classe do item anterior
            iten.item(valor+1).removeAttribute('class');
        }
    }
    //adiciona classe ao próximo item
    iten.item(valor).setAttribute('class', 'selected');
}

I made a change to count more too, replace the 5 for iten.length - 1