Как я могу показать этот массив на экране?

Question

ребята, у меня проблема для вас:)

В моем классе 31 ученик, мне нужно показать имена 2 учеников (в порядке из массива имен) на экране в понедельник в пятницу и показать WEEKEND на экране в субботу и воскресенье, и когда массив имен закончится, мне нужно, чтобы он начался заново (al oop); Приведенный ниже код - это мой взгляд на проблему, но я продолжаю получать неопределенность, и я не знаю, почему или если мой метод даже хорош для решения проблемы.

let dayNr = new Date().getDay();
let names1 = ['name1', 'name3', 'name5', 'name7', 'name9', 'name11', 'name13', 'name15', 'name17', 'name19', 'name21', 'name23', 'name25', 'name27', 'name29', 'name31'];
let names2 = ['name2', 'name4', 'name6', 'name8', 'name10', 'name12', 'name14', 'name16', 'name18', 'name20', 'name22', 'name24', 'name26', 'name28', 'name30'];
let n1 = names1.length;
let n2 = names2.length;


if (dayNr === 0 || dayNr === 6) {
  document.getElementById("firstName").innerHTML = "WEEKEND";
  document.getElementById("secondName").innerHTML = "WEEKEND";
} else {
  var i = 0;
  var j = 0;
  while (i <= n1) {
    document.getElementById("firstName").innerHTML = names1[i];
    i++;
  }
  i = 0;

  while (j <= n2) {
    document.getElementById("secondName").innerHTML = names2[j];
    j++;
  }
  j = 0;
}

<div class="col-md-12 colTop py-3 mb-4">
  <h1 class="text-white">STUDENTS IN CLASS</h1>
</div>

<table class="table table-bordered">

  <tbody>

    <tr>
      <td id="firstName"></td>
    </tr>

    <tr>
      <td id="secondName"></td>
    </tr>


  </tbody>
</table>

Answer 1

По следующим причинам вы столкнулись с проблемой:

1. Вы перезаписали внутренний тд html, из-за которого печатается только одно имя.
2. В условие while l oop, которое вы проверили, меньше чем равно длине массива, и поскольку в конечном l oop не будет никакого значения, оно показывает неопределенное.

Следовательно, Решив эти две проблемы, ваша проблема будет решена, как я показал в следующем коде:

let dayNr = new Date().getDay();
let names1 = ['name1', 'name3', 'name5', 'name7', 'name9', 'name11', 'name13', 'name15', 'name17', 'name19', 'name21', 'name23', 'name25', 'name27', 'name29', 'name31'];
let names2 = ['name2', 'name4', 'name6', 'name8', 'name10', 'name12', 'name14', 'name16', 'name18', 'name20', 'name22', 'name24', 'name26', 'name28', 'name30'];
let n1 = names1.length;
let n2 = names2.length;

if (dayNr === 0 || dayNr === 6) {
  document.getElementById("firstName").innerHTML = "WEEKEND";
  document.getElementById("secondName").innerHTML = "WEEKEND";
} else {
  var i = 0;
  var j = 0;
  while (i < n1) {
    let firstName = document.getElementById("firstName");
    const delimiter = firstName.innerHTML !== '' ? ',' : '';
    firstName.innerHTML =`${firstName.innerHTML}${delimiter} ${names1[i]}`;
    i++;
  }
  i = 0;

  while (j < n2) {
    let secondName = document.getElementById("secondName");
    const delimiter = secondName.innerHTML ? ',' : secondName.innerHTML;
    secondName.innerHTML = `${secondName.innerHTML}${delimiter} ${names2[j]}`;
    j++;
  }
  j = 0;
}

<div class="col-md-12 colTop py-3 mb-4">
  <h1 class="text-white">STUDENTS IN CLASS</h1>
</div>

<table class="table table-bordered">

  <tbody>

    <tr>
      <td id="firstName"></td>
    </tr>

    <tr>
      <td id="secondName"></td>
    </tr>


  </tbody>
</table>

Answer 2

Вы получаете неопределенное значение из-за сравнения на равенство. В то время как l oop в состоянии else не требуется, вам нужно печатать только 2 имени каждый день. Таким образом, вы можете выполнить следующие действия:

1. Сохранить последний индекс в памяти и каждый раз извлекать следующий элемент и отображать его.
2. Использование функции генератора (пример примера, как показано ниже)

let dayNr = new Date().getDay();
let names1 = ['name1', 'name3', 'name5', 'name7', 'name9', 'name11', 'name13', 'name15', 'name17', 'name19', 'name21', 'name23', 'name25', 'name27', 'name29', 'name31'];
let names2 = ['name2', 'name4', 'name6', 'name8', 'name10', 'name12', 'name14', 'name16', 'name18', 'name20', 'name22', 'name24', 'name26', 'name28', 'name30'];
let n1 = names1.length;
let n2 = names2.length;


if (dayNr === 0 || dayNr === 6) {
  document.getElementById("firstName").innerHTML = "WEEKEND";
  document.getElementById("secondName").innerHTML = "WEEKEND";
} else {
  var data1 = data(names1);
  var data2 = data(names2);
  var currVal = document.getElementById("firstName").innerHTML
  var currIndex = getIndex(currVal, names1)

  // if the currIndex is equal to length of array then start from first element 
  if(currIndex === n1) {
     currIndex = 0;
  }
  var i = 0, j = 0, val1 = '' , val2 = ''
  while(i <= currIndex) {
      val1 = data1.next().value;
      i++
  }
  while(j <= currIndex) {
      val2 = data2.next().value;
      j++
  }
  document.getElementById("firstName").innerHTML = val1;
  document.getElementById("secondName").innerHTML = val2;   
}

function getIndex(val, arr) {
    if(val === "")
       return 0;
    return arr.indexOf(val)
} 
function* data(arr) {
  yield* arr;
}

<div class="col-md-12 colTop py-3 mb-4">
  <h1 class="text-white">STUDENTS IN CLASS</h1>
</div>

<table class="table table-bordered">

  <tbody>

    <tr>
      <td id="firstName"></td>
    </tr>

    <tr>
      <td id="secondName"></td>
    </tr>


  </tbody>
</table>