Как напечатать 2 массива, используя цикл forEach с некоторыми условиями?

Question

У меня есть 2 массива:

1. Имена курсов [библия, математика, английский]
2. оценки курсов [100, 60, 80]

Я пытаюсь напечатать их в DOM с 1 каждого массива в одной строке + цветовые условия в соответствии с их оценками.

javascript

function paintGrades (gradeArr, coursArr) {

  gradeArr.forEach(function (element) {
      var gradeColor = 'bad';
      if (element.gradeArr >= 80) {
        gradeColor = 'good';
      } else if (element.gradeArr >= 60) {
        gradeColor = 'ok';
      } else if (element.gradeArr === 0) {
        gradeColor = 'normal';
      }

      document.getElementById('grade').innerHTML +=
      "<div class='" + gradeColor + "'>" + element.coursArr + ": " + element.gradeArr + "</div>" + "<hr>";
})
}

Мой ожидаемый результат должен быть:

bible: 100 (colored as good)
math: 60 (colored as ok)
english: 40 (colored as bad)

...

Answer 1

Предполагая, что массивы имеют одинаковую длину (используйте проверку ошибок при обработке дескриптора в том случае, если их нет), вы можете использовать один цикл for для итерации по обоим из них.

function paintGrades (gradeArr, coursArr) {

  // check that gradeArr.length === courseArr.length

  for(let i=0; i<gradeArr.length; i++){
    let grade = gradeArr[i];
    let course = coursArr[i];

    // do stuff
  }