If Else if in Javascript

Question

I’m developing an application using phonegap/Cordova that stores data using localStorage and I’m having a problem with javascript... I’m calling a function to save() my data, a function to load() and a rank() function. I am checking the local storage and it writes and loads all data correctly, but in rank() function, it does not check the condition correctly. I already made and I changed the conditions of the IF but still I could not... he only recognizes the first IF and the last ELSE. Can anyone help me? I’ll leave the javascript part here.

function salvar() {
    var pontopatente = document.getElementById('pontopatente').value;
    localStorage.setItem('pontopatente', pontopatente);

    var checkbox1 = document.getElementById('ob1');
    localStorage.setItem('ob1', checkbox1.checked);

    var range2 = document.getElementById('ob2').value;
    localStorage.setItem('ob2', range2);

    var checkbox3 = document.getElementById('ob3');
    localStorage.setItem('ob3', checkbox3.checked);

    var range4 = document.getElementById('ob4').value;
    localStorage.setItem('ob4', range4);

    var range5 = document.getElementById('ob5').value;
    localStorage.setItem('ob5', range5);

    var range6 = document.getElementById('ob6').value;
    localStorage.setItem('ob6', range6);

    var range7 = document.getElementById('ob7').value;
    localStorage.setItem('ob7', range7);

    var checkbox8 = document.getElementById('ob8');
    localStorage.setItem('ob8', checkbox8.checked);

    var range9 = document.getElementById('ob9').value;
    localStorage.setItem('ob9', range9);

    var checkbox10 = document.getElementById('ob10');
    localStorage.setItem('ob10', checkbox10.checked);

    var checkbox11 = document.getElementById('ob11');
    localStorage.setItem('ob11', checkbox11.checked);

    var checkbox12 = document.getElementById('ob12');
    localStorage.setItem('ob12', checkbox12.checked);

    var checkbox13 = document.getElementById('ob13');
    localStorage.setItem('ob13', checkbox13.checked);

    var checkbox14 = document.getElementById('ob14');
    localStorage.setItem('ob14', checkbox14.checked);

    var checkbox15 = document.getElementById('ob15');
    localStorage.setItem('ob15', checkbox15.checked);

    var checkbox16 = document.getElementById('ob16');
    localStorage.setItem('ob16', checkbox16.checked);
}

function carregar() {
    var carregarPontos = localStorage.getItem('pontopatente');
    if (carregarPontos) {
        document.getElementById('pontopatente').value = carregarPontos
    }

    var checked1 = JSON.parse(localStorage.getItem('ob1'));
    if (checked1 == true) {
        document.getElementById("ob1").checked = true;
    }

    var range2 = localStorage.getItem('ob2');
    if (range2) {
        document.getElementById('ob2').value = range2;
    }

    var checked3 = JSON.parse(localStorage.getItem('ob3'));
    if (checked3 == true) {
        document.getElementById("ob3").checked = true;
    } else {
        document.getElementById("ob3").checked = false;
    }

    var range4 = localStorage.getItem('ob4');
    if (range4) {
        document.getElementById('ob4').value = range4;
    }

    var range5 = localStorage.getItem('ob5');
    if (range5) {
        document.getElementById('ob5').value = range5;
    }

    var range6 = localStorage.getItem('ob6');
    if (range6) {
        document.getElementById('ob6').value = range6;
    }

    var range7 = localStorage.getItem('ob7');
    if (range7) {
        document.getElementById('ob7').value = range7;
    }

    var checked8 = JSON.parse(localStorage.getItem('ob8'));
    if (checked8 == true) {
        document.getElementById("ob8").checked = true;
    } else {
        document.getElementById("ob8").checked = false;
    }

    var range9 = localStorage.getItem('ob9');
    if (range9) {
        document.getElementById('ob9').value = range9;
    }

    var checked10 = JSON.parse(localStorage.getItem('ob10'));
    if (checked10 == true) {
        document.getElementById("ob10").checked = true;
    } else {
        document.getElementById("ob10").checked = false;
    }

    var checked11 = JSON.parse(localStorage.getItem('ob11'));
    if (checked11 == true) {
        document.getElementById("ob11").checked = true;
    } else {
        document.getElementById("ob11").checked = false;
    }

    var checked12 = JSON.parse(localStorage.getItem('ob12'));
    if (checked12 == true) {
        document.getElementById("ob12").checked = true;
    } else {
        document.getElementById("ob12").checked = false;
    }

    var checked13 = JSON.parse(localStorage.getItem('ob13'));
    if (checked13 == true) {
        document.getElementById("ob13").checked = true;
    } else {
        document.getElementById("ob13").checked = false;
    }

    var checked14 = JSON.parse(localStorage.getItem('ob14'));
    if (checked14 == true) {
        document.getElementById("ob14").checked = true;
    } else {
        document.getElementById("ob14").checked = false;
    }

    var checked15 = JSON.parse(localStorage.getItem('ob15'));
    if (checked15 == true) {
        document.getElementById("ob15").checked = true;
    } else {
        document.getElementById("ob15").checked = false;
    }

    var checked16 = JSON.parse(localStorage.getItem('ob16'));
    if (checked16 == true) {
        document.getElementById("ob16").checked = true;
    }
}

function rank() {

    var pt = localStorage.getItem('pontopatente');
    var b2 = localStorage.getItem('ob2');
    var b4 = localStorage.getItem('ob4');
    var b5 = localStorage.getItem('ob5');
    var b6 = localStorage.getItem('ob6');
    var b7 = localStorage.getItem('ob7');
    var b9 = localStorage.getItem('ob9');
    var c1 = JSON.parse(localStorage.getItem('ob1'));
    var c3 = JSON.parse(localStorage.getItem('ob3'));
    var c10 = JSON.parse(localStorage.getItem('ob10'));
    var c11 = JSON.parse(localStorage.getItem('ob11'));
    var c12 = JSON.parse(localStorage.getItem('ob12'));
    var c13 = JSON.parse(localStorage.getItem('ob13'));
    var c14 = JSON.parse(localStorage.getItem('ob14'));
    var c15 = JSON.parse(localStorage.getItem('ob15'));
    var c16 = JSON.parse(localStorage.getItem('ob16'));


    if (pt > 599 && c16 == true) {
        localStorage.setItem('rank', "Coronel")
    } else if (pt > 599 && b2 > 19 && b3 == true && b5 > 4 && b6 > 8 && b7 > 6 && b8 == true && b9 > 9 && b10 == true && b11 == true && b12 == true && b15 == true) {
        localStorage.setItem('rank', "Capitão")
    } else if (pt > 359 && b2 > 9 && b4 > 4 && b5 > 4 && b7 > 4 && b8 == true && b9 > 2 && b10 == true && b12 == true && b13 == true && b15 == true) {
        localStorage.setItem('rank', "Tenente")
    } else if (pt > 179 && b2 > 4 && b6 > 4 && b7 > 1 && b8 == true && b10 == true && b12 == true && b15 == true) {
        localStorage.setItem('rank', "Sargento")
    } else if (pt > 99 && b4 > 1 && b5 > 1 && b10 == true && b12 == true && b14 == true && b15 == true) {
        localStorage.setItem('rank', "Cabo")
    } else if (pt > 49 && b6 > 2 && b10 == true && b12 == true && b15 == true) {
        localStorage.setItem('rank', "Soldado")
    } else if (pt > 24 && b10 == true && b11 == true && b12 == true && b15 == true) {
        localStorage.setItem('rank', "Recruta")
    } else if (pt > 0 && b12 == true && b15 == true) {
        localStorage.setItem('rank', "Alistado")
    } else {
        localStorage.setItem('rank', "Sem Patente")
    }
}

Answer 1

I believe that the difficulty of finding the problem comes from the complexity and low maneuverability of your code. It is very bad to read and understand what happens. I recommend first refactoring so that it gets more dry.

var dados = null;

function salvar() {
    dados = {
        pontoPatente = document.getElementById('pontopatente').value,
        checkbox1 = document.getElementById('ob1'),
        range2 = document.getElementById('ob2').value,
        checkbox3 = document.getElementById('ob3'),
        range4 = document.getElementById('ob4').value,
        range5 = document.getElementById('ob5').value,
        range6 = document.getElementById('ob6').value,
        range7 = document.getElementById('ob7').value,
        checkbox8 = document.getElementById('ob8'),
        range9 = document.getElementById('ob9').value,
        checkbox10 = document.getElementById('ob10').value,
        checkbox11 = document.getElementById('ob11').value,
        checkbox12 = document.getElementById('ob12').value,
        checkbox13 = document.getElementById('ob13').value,
        checkbox14 = document.getElementById('ob14').value,
        checkbox15 = document.getElementById('ob15').value,
        checkbox16 = document.getElementById('ob16')
    }
    localStorage.setItem('dados', dados);
}

function carregar() {
    var dados = localStorage.getItem('dados');

    document.getElementById('pontopatente').value = dados.carregarPontos;
    document.getElementById("ob1").checked = dados.ob1;
    document.getElementById('ob2').value = dados.range2;
    document.getElementById("ob3").checked = dados.ob3;
    // demais campos
}

function rank() {

    dados = localStorage.getItem('dados');

    var patentes = [
       { 
           titulo = 'Coronel',
           pontos = 599,
           // outros dados
       },
       { 
           titulo = 'Capitao',
           pontos = 359,
           // outros dados
       },
    ];

   // simplifique suas regras e seus métodos
   for (let i = 0; i <= patentes.length; i++) {
       var patente = patentes[i];
       if (dados.pontoPatente > patente.pontos) {
           localStorage.setItem('rank', patente.titulo);
           return;
       }
   }
}

With thinner code, it’s much easier to developer and maintain your application/game. Otherwise, stop using variables with names checkbox1 or range4, that is horrible.

Finally, I also recommend using Angularjs to create your mobile app with Cordova. You’ll get better code and more ease in creating cross-Platform applications.

I have in my Github repository a code for mobile application with Angularjs and Cordova. It has a link to a course in Pluralsight that I did at the time. I recommend!