Странное поведение с оператором else if (javascript)

У вас есть сравнения назад в else if, вы используете 70 >= percent, а не percent >= 70 (и так далее).

Отдельно нет причин присваивать '' innerHTML, если вы собираетесь присвоить ему что-то еще, и нет причин повторять верхнюю границу (percent <= 89 и т. д.), потому что вы используете else if, поэтому ветвь percent >= 90 будет иметь уже соблюдено. Повторение их также является проблемой обслуживания (вы измените одно, но забудете изменить другое).

So:

if (percent >= 90) {
    grade.innerHTML = 'A ' + percent + '%';
} else if (percent >= 80) {
    grade.innerHTML = 'B ' + percent + '%';
} else if (percent >= 70) {
    grade.innerHTML = 'C ' + percent + '%';
} else if (percent >= 60) {
    grade.innerHTML = 'D ' + percent + '%';
} else if (percent >= 0) {
    grade.innerHTML = 'F ' + percent + '%';
} else {
    grade.innerHTML = '';
}

Или, конечно, вы можете использовать карту, так как границы вашего класса делятся на 10 без остатка:

// Somewhere central
var grades = {
    6: 'D',
    7: 'C',
    8: 'B',
    9: 'A',
    10: 'A'
};

// ...then simply:
if (percent >= 0) {
    grade.innerHTML = (grades[Math.floor(percent / 10)] || 'F') + ' ' + percent + '%';
} else {
    grade.innerHTML = "Less than 0?!";
}

var grades = {
    6: 'D',
    7: 'C',
    8: 'B',
    9: 'A',
    10: 'A'
};

function showGrade(percent) {
  var grade;
  if (percent >= 0) {
    grade = (grades[Math.floor(percent / 10)] || 'F') + ' ' + percent + '%';
  } else {
    grade = "Less than 0?!";
  }
  snippet.log(grade);
}

var n;
for (n = 0; n <= 100; ++n) {
  showGrade(n);
}

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

If-Else диапазон условий выглядит неправильно, попробуйте этот код...

var total = function (){
var earned = 0, possible = 0;
for(i = 0; i < Assignments.length; i++){
     possible += parseInt(Assignments[i].possible);
     earned += parseInt(Assignments[i].earned);
 }
 var percent = (Math.floor((earned/possible) * 100));

 console.log(percent);

  //grade letter

  if (percent >= 90){
     grade.innerHTML = 'A ' + percent + '%';
  } else if (percent >= 80 && percent <= 89){
     grade.innerHTML = 'B ' + percent + '%';
  } else if (percent >= 70 && percent <= 79){
     grade.innerHTML = 'C ' + percent + '%';
  } else if (percent >= 60 && percent <= 69){
     grade.innerHTML = 'D ' + percent + '%';
  } else if(percent >= 0 && percent <= 59){
     grade.innerHTML = 'F ' + percent + '%';
  } else {grade.innerHTML = '';}
};

Хотя я оптимизировал некоторый код, мне не нужны 2 цикла, вы можете суммировать переменные earned, possible в одном цикле, и не нужно .innerHTML = '' при присвоении значения элементу.

Я нашел хороший пост об эффективности с использованием различных методов сравнения вещей. Я по-прежнему предлагаю использовать блок-переключатель вместо if/else, но технически это не лучше, чем ваше решение, но, как мне кажется, его приятнее читать. Вот фрагмент кода:

switch (true) {
case (0 <= val &&  val < 1000): /* do something */ break;
case (1000 <= val &&  val < 2000): /* do something */ break;
...
case (29000 <= val &&  val < 30000): /* do something */ break;
}

Взято из этого поста. Также есть интересная таблица (в первом ответе) less-than и различные методы выполнения этой работы. Я знаю, что на самом деле это не решение для вашего ответа, но оно может пригодиться, если вам нужно добавить больше if/else и делать огромные списки со значениями.