Brtdku

the timeWorkedTotal.innerHTML content generated by JS shows up in Chrome but is empty in Firefox (and Edge). All other .innerHTML content shows without problem in either browser. If possible, I would like to resolve this using vanilla JS/html/css without using any libraries unless it is completely unavoidable.

I have tried to change innerHTML to alternatives like innerText and textContent but it did not help. I have checked the cross browser compatibility at https://www.quirksmode.org/dom/html/ and it seems that innerHTML should work fine (I am not concerned with security at this point since picked up data is hard-coded).

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"

    },

]

//A function that calculates the total time work at a job using collected start and end dates

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")

    }

}}

//Function that creates html elements for and display user input data related to work experience information

 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;

}}

The innerHTML from the if else if statement for timeWorkedTotal does not show in the firefox although empty parent div and a holding span are generated with no problem.

Note: parsing of date strings with the Date constructor (and
Date.parse, they are equivalent) is strongly discouraged due to
browser differences and inconsistencies.

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

If the structure of dateStart and dateEnd is fix, you could use a litte function to convert the Strings in proper Date-Objects.

  // 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();

  }

and use that in your function 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>