Значения цикла for появляются как время от времени в Javascript

Question

У меня есть цикл for, который повторяет список аудио-элементов html и предназначен для отображения их общего времени.Значения случайным образом отображаются как NaN при обновлении страницы.Иногда один из них, иногда все, иногда ни один из них и т. Д. Я попытался сделать это функцией, которая запускается после загрузки окна, я также попытался загрузить документ.Наконец я оставил это вне любой функции, и результат - то же самое.Вот мой код:

let totalDurationMinutes = 0;
let totalDurationSeconds = 0;

for (i=0; i<playList.length; i++) {


let newP = document.createElement('p');
totalDurationMinutes = Math.floor(playList[i].duration/60);
totalDurationSeconds = Math.ceil(playList[i].duration%60);


if(totalDurationMinutes<10){
totalDurationMinutes = "0" + totalDurationMinutes;
}

if(totalDurationSeconds<10){
totalDurationSeconds = "0" + totalDurationSeconds;
}


newP.className = "totalDuration";
newP.innerHTML = totalDurationMinutes + ":" + totalDurationSeconds;
playList[i].parentElement.appendChild(newP);
}

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

Answer 1

Всегда есть вероятность, что вы получаете нечисловые данные, и вам следует учитывать это.

Попробуйте что-то вроде следующего, используя isNaN для проверки на счёт:

let totalDurationMinutes = 0;
let totalDurationSeconds = 0;

for (i=0; i<playList.length; i++) {


  let newP = document.createElement('p');

  if(isNan(playList[i])){ //Bascic numeric test
     newP.innerHTML = "Duration not numeric: " + playList[i];
  }else{ 
     totalDurationMinutes = Math.floor(playList[i].duration/60);
     totalDurationSeconds = Math.ceil(playList[i].duration%60);    

     if(totalDurationMinutes<10){
        totalDurationMinutes = "0" + totalDurationMinutes;
     }

     if(totalDurationSeconds<10){
        totalDurationSeconds = "0" + totalDurationSeconds;
     }    

     newP.className = "totalDuration";
     newP.innerHTML = totalDurationMinutes + ":" + totalDurationSeconds;
     playList[i].parentElement.appendChild(newP);
  }
}

Answer 2

Я нашел какое-то решение.Поскольку при щелчке функция выполняется правильно, а при загрузке не всегда, я подумал, что документ может не быть полностью загружен во время выполнения функции, поэтому я просто использовал setTimeout со значением 1800. Я пытался с меньшими значениями, но со временем это не удаетсяко времени, но меньше, чем раньше.Так что это будет работать нормально, если у вас хорошее интернет соединение.Если кто-то придумает лучшее, 100% рабочее решение, я буду рад его услышать.Вот мой код сейчас:

document.addEventListener("DOMContentLoaded", setTimeout(function (){

let totalDurationMinutes = 0;
let totalDurationSeconds = 0;

for (i=0; i<playList.length; i++) {


let newP = document.createElement('p');
totalDurationMinutes = Math.floor(playList[i].duration/60);
totalDurationSeconds = Math.ceil(playList[i].duration%60);


if(totalDurationMinutes<10){
  totalDurationMinutes = "0" + totalDurationMinutes;
}

if(totalDurationSeconds<10){
  totalDurationSeconds = "0" + totalDurationSeconds;
}


newP.className = "totalDuration";
newP.innerHTML = totalDurationMinutes + ":" + totalDurationSeconds;
playList[i].parentElement.appendChild(newP);

}

},1800));

Answer 3

попробуйте изменить

if(totalDurationMinutes<10){
totalDurationMinutes = "0" + totalDurationMinutes;
}

if(totalDurationSeconds<10){
totalDurationSeconds = "0" + totalDurationSeconds;
}

с помощью этой

if(totalDurationMinutes<10){
totalDurationMinutes = 0 + totalDurationMinutes;
}

if(totalDurationSeconds<10){
totalDurationSeconds = 0 + totalDurationSeconds;
}

строки "0" с номером 0