Содержимое, созданное innerHTML, отображается в Chrome, но не в Firefox или Edge

Question

контент timeWorkedTotal.innerHTML, созданный JS, отображается в Chrome, но пуст в Firefox (и Edge). Весь другой контент .innerHTML отображается без проблем в любом браузере. Если возможно, я бы хотел решить эту проблему, используя vanilla JS / html / css без использования каких-либо библиотек, если это не является абсолютно неизбежным.

Я пытался изменить innerHTML на альтернативы, такие как innerText и textContent, но это не помогло. Я проверил кросс-браузерную совместимость на https://www.quirksmode.org/dom/html/, и кажется, что innerHTML должен работать нормально (на данный момент я не беспокоюсь о безопасности, так как собранные данные жестко запрограммированы).

let jobData = [
    {
        dateStart: "June 2016",
        dateEnd: "October 2018",
        dates: "June 2016 – October 2018",
        employer: "Tim Hortons",
        title: "Cashier"
    },
    {
        dateStart: "January 2013",
        dateEnd: "March 2017",
        dates: "January 2013 – March 2017",
        employer: "Café Bar Main Street",
        title: "Server"
    },
    {
        dateStart: "June 2015",
        dateEnd: "May 2017",
        dates: "June 2015 – May 2017",
        employer: "Café Bar Main Street",
        title: "Server"
    },
]

// Функция, которая вычисляет общее время работы на работе, используя собранные даты начала и окончания

for (let i = 0; i <= jobData.length - 1; i++) {
function daysBetween(jobData){
    let one_day = 1000 * 60 * 60 * 24;
    start = new Date(jobData.dateStart).getTime();
    end = new Date(jobData.dateEnd).getTime();
    timeWorked = (end - start);
    let timeWorkedYears = (timeWorked / one_day /365).toFixed(2);

    let expDetails = document.getElementById('exp_details');
    let timeWorked2 = document.createElement('div');
    let timeWorkedTotal = document.createElement('span');
    expDetails.appendChild(timeWorked2);
    timeWorked2.appendChild(timeWorkedTotal);
    timeWorked2.classList.add('time_worked');
    timeWorkedTotal.classList.add('time_worked_total');

    //condition checks the length of employment and assigns proper "year/years"

          if(timeWorkedYears < 1.00) {
         timeWorkedTotal.innerHTML = ("less than a year") 
     } else if (timeWorkedYears == 1.00) {
        timeWorkedTotal.innerHTML = (Math.round(timeWorkedYears) + " year")
     } else if(timeWorkedYears > 1.00 && timeWorkedYears < 2.00) {
        timeWorkedTotal.innerHTML = (Math.round(timeWorkedYears) + "+ year")
     } else if(timeWorkedYears >= 2) {
        timeWorkedTotal.innerHTML = (Math.round(timeWorkedYears) + "+ years")
    }
}}

// Функция, которая создает элементы html и отображает вводимые пользователем данные, относящиеся к информации об опыте работы

 for (let i = 0; i <= jobData.length - 1; i++) {
    experienceData(jobData[i]);
    daysBetween(jobData[i]);

function experienceData(jobData) {
    let expDetails = document.getElementById('exp_details');
    // empty div is created below that will hold all the of the data for job history
    let jobDiv = document.createElement('div');
    // new div is appended to the existing parent div
    expDetails.appendChild(jobDiv);
    // children of the jobDiv are created to hold dates, employer name and job title
    let jobDates = document.createElement('span');
    let employer = document.createElement('span');
    let title = document.createElement('span');
    // all children are appended to their respective parents
    jobDiv.appendChild(jobDates);
    jobDiv.appendChild(employer);
    jobDiv.appendChild(title);
    //class names are added to newly created elements in order to apply styling to them
    jobDiv.classList.add('job_parent');
    jobDates.classList.add('job_dates');
    employer.classList.add('employer');
    title.classList.add('job_title');
    //empty elements pick up information from the provided data file
    jobDates.innerHTML = jobData.dates;
    employer.innerHTML = jobData.employer;
    title.innerHTML = jobData.title;
}}

innerHTML из оператора if else if для timeWorkedTotal не отображается в firefox, хотя пустой родительский div и промежуток хранения генерируются без проблем.

Answer 1

Примечание: разбор строк даты с помощью конструктора Date (и Date.parse, они эквивалентны) настоятельно не рекомендуется из-за различия и несоответствия в браузере.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Если структура dateStart и dateEnd является фиксированной, вы можете использовать функцию litte для преобразования строк в соответствующие объекты Date-Object.

  // convert the date strings into Date-Objects  
  function convertDateStr(s) {
    var m = ['JANUARY', 'FEBRUARY', 'MARCH', 'APRIL', 'MAY', 'JUNE', 'JULY', 'AUGUST', 'SEPTEMBER', 'OCTOBER', 'NOVEMBER', 'DECEMBER'];
    var sArr = s.split(' ');
    return new Date(sArr[1],m.indexOf(sArr[0])).getTime();
  }

и используйте это в своей функции daysBetween

start = convertDateStr(jobData.dateStart);
end = convertDateStr(jobData.dateEnd);

let jobData = [
  {
    dateStart: "June 2016",
    dateEnd: "October 2018",
    dates: "June 2016 – October 2018",
    employer: "Tim Hortons",
    title: "Cashier"
  },
  {
    dateStart: "January 2013",
    dateEnd: "March 2017",
    dates: "January 2013 – March 2017",
    employer: "Café Bar Main Street",
    title: "Server"
  },
  {
    dateStart: "June 2015",
    dateEnd: "May 2017",
    dates: "June 2015 – May 2017",
    employer: "Café Bar Main Street",
    title: "Server"
  },
];

for (let i = 0; i <= jobData.length - 1; i++) {
  function daysBetween(jobData){
    let one_day = 1000 * 60 * 60 * 24;
    start = convertDateStr(jobData.dateStart);
    end = convertDateStr(jobData.dateEnd);
    timeWorked = (end - start);
    let timeWorkedYears = (timeWorked / one_day /365).toFixed(2);

    let expDetails = document.getElementById('exp_details');
    let timeWorked2 = document.createElement('div');
    let timeWorkedTotal = document.createElement('span');
    expDetails.appendChild(timeWorked2);
    timeWorked2.appendChild(timeWorkedTotal);
    timeWorked2.classList.add('time_worked');
    timeWorkedTotal.classList.add('time_worked_total');

    //condition checks the length of employment and assigns proper "year/years"

    if(timeWorkedYears < 1.00) {
      timeWorkedTotal.innerHTML = ("less than a year"); 
     } else if (timeWorkedYears == 1.00) {
        timeWorkedTotal.innerHTML = (Math.round(timeWorkedYears) + " year");
     } else if(timeWorkedYears > 1.00 && timeWorkedYears < 2.00) {
        timeWorkedTotal.innerHTML = (Math.round(timeWorkedYears) + "+ year");
     } else if(timeWorkedYears >= 2) {
        timeWorkedTotal.innerHTML = (Math.round(timeWorkedYears) + "+ years");
    }
  }
  // convert the date strings into Date-Objects  
  function convertDateStr(s) {
    var m = ['JANUARY', 'FEBRUARY', 'MARCH', 'APRIL', 'MAY', 'JUNE', 'JULY', 'AUGUST', 'SEPTEMBER', 'OCTOBER', 'NOVEMBER', 'DECEMBER'];
    var sArr = s.split(' ');
    return new Date(sArr[1],m.indexOf(sArr[0])).getTime();
  }
}

for (let i = 0; i <= jobData.length - 1; i++) {
    experienceData(jobData[i]);
    daysBetween(jobData[i]);
}
function experienceData(jobData) {
  let expDetails = document.getElementById('exp_details');
  // empty div is created below that will hold all the of the data for job history
  let jobDiv = document.createElement('div');
  // new div is appended to the existing parent div
  expDetails.appendChild(jobDiv);
  // children of the jobDiv are created to hold dates, employer name and job title
  let jobDates = document.createElement('span');
  let employer = document.createElement('span');
  let title = document.createElement('span');
  // all children are appended to their respective parents
  jobDiv.appendChild(jobDates);
  jobDiv.appendChild(employer);
  jobDiv.appendChild(title);
  //class names are added to newly created elements in order to apply styling to them
  jobDiv.classList.add('job_parent');
  jobDates.classList.add('job_dates');
  employer.classList.add('employer');
  title.classList.add('job_title');
  //empty elements pick up information from the provided data file
  jobDates.innerHTML = jobData.dates;
  employer.innerHTML = jobData.employer;
  title.innerHTML = jobData.title;
}

<div id="exp_details"></div>