Question

由JS生成的timeWorkedTotal.innerHTML内容在Chrome中显示，但在Firefox（和Edge）中为空。所有其他.innerHTML内容在任一浏览器中显示均没有问题。如果可能的话，除非完全不可避免，我想使用香草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;
}}

尽管生成了空的父div和保留跨度也没有问题，但是timeWorkedTotal的if else if语句中的innerHTML并未显示在Firefox中。

Answer 1

注意：使用Date构造函数解析日期字符串（和强烈建议不要使用Date.parse，它们等效）浏览器的差异和不一致之处。

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

如果dateStart和dateEnd的结构是固定的，则可以使用litte函数将字符串转换为适当的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();
  }

并在您的功能之间使用它

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>

innerHTML生成的内容在Chrome中显示，但在Firefox或Edge中不显示

1 个答案: