Question

伙计，我为您遇到了问题：）

我的班级有31名学生，我需要在周一至周五的屏幕上显示2名学生的姓名（按名称顺序排列），并在周六和周日的屏幕上显示WEEKEND。名称数组完成后，我需要它重新开始（循环）；下面的代码是我对问题的看法，但是我一直未定义，我不知道为什么或我的方法甚至可以很好地解决问题。

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

由于以下原因，您遇到了此问题：

您一直在覆盖td内部html，因为只有一个名称正在打印。
在while循环条件下，您检查的小于等于数组的长度，因为最终将没有任何值循环显示未定义。

因此，如下面的代码所示，修复这两个问题将解决您的问题：

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

由于相等比较，您变得不确定。不需要在else条件下的while循环，因为您每天只需要打印两个名称即可。因此，您可以执行以下操作

将最后一个索引保存在存储中，并每次获取下一个元素并显示它。
使用生成器功能（示例示例如下所示）

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>

如何在屏幕上显示此数组？

2 个答案: