可以选择一个Excel文件。然后单击上载，代码将开始。当我按“上传”按钮时，会显示
'（索引）：57未捕获的参考错误：未定义上载
在HTMLInputElement.onclick'
我试图将<script>放在页面开头和结尾的<body>的头部，现在我已将js文件与html文件分开，并已将其加载在头上。
var aerobic = ['Totalbalance', 'Powerpump', 'HIT training', 'Cardio Fitness', 'Yoga'];
var crossbox = ['WOD- les', 'Circuit training'];
function Upload() {
//Reference the FileUpload element.
var fileUpload = document.getElementById("fileUpload");
//Validate whether File is valid Excel file.
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xls|.xlsx)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
//For Browsers other than IE.
if (reader.readAsBinaryString) {
reader.onload = function (e) {
ProcessExcel(e.target.result);
};
reader.readAsBinaryString(fileUpload.files[0]);
} else {
//For IE Browser.
reader.onload = function (e) {
var data = "";
var bytes = new Uint8Array(e.target.result);
for (var i = 0; i < bytes.byteLength; i++) {
data += String.fromCharCode(bytes[i]);
}
ProcessExcel(data);
};
reader.readAsArrayBuffer(fileUpload.files[0]);
}
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid Excel file.");
}
}
function ProcessExcel(data) {
//Read the Excel File data.
var workbook = XLSX.read(data, {
type: 'binary'
});
//Fetch the name of First Sheet.
var firstSheet = workbook.SheetNames[0];
//Read all rows from First Sheet into an JSON array.
var excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);
//Create a HTML Table element.
var table = document.createElement("table");
table.border = "1";
//Add the header row.
var row = table.insertRow(-1);
//Add the header cells.
var headerCell = document.createElement("TH");
headerCell.innerHTML = "Datum";
row.appendChild(headerCell);
headerCell = document.createElement("TH");
headerCell.innerHTML = "Starttijd";
row.appendChild(headerCell);
headerCell = document.createElement("TH");
headerCell.innerHTML = "Eindtijd";
row.appendChild(headerCell);
headerCell = document.createElement("TH");
headerCell.innerHTML = "Activiteit";
row.appendChild(headerCell);
//Add the data rows from Excel file.
for (var i = 0; i < excelRows.length; i++) {
//Add the data row.
var row = table.insertRow(-1);
//Add the data cells.
var cell = row.insertCell(-1);
cell.innerHTML = excelRows[i].Datum;
cell = row.insertCell(-1);
cell.innerHTML = excelRows[i].Starttijd;
cell = row.insertCell(-1);
cell.innerHTML = excelRows[i].Eindtijd;
cell = row.insertCell(-1);
cell.innerHTML = excelRows[i].Activiteit;
}
sortDates(excelRows);
}
function sortDates(excelRows) {
// var spinning = [];
var rest = [];
var thisWeek = [];
var curr = new Date; // get current date
var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
var last = first + 7; // last day is the first day + 6
var firstday = new Date(curr.setDate(first));
var lastday = new Date(curr.setDate(last));
for (var i = 0; i < excelRows.length; i++) {
var parts = excelRows[i].Datum.split('-');
var mydate = new Date(Date.UTC(parts[2], parts[1] - 1, parts[0]));
if (new Date(mydate) > new Date(firstday) && new Date(mydate) < new Date(lastday)) {
thisWeek.push(excelRows[i]);
} else {
rest.push(excelRows[i]);
}
}
splitWeek(thisWeek);
}
function splitWeek(thisWeek) {
var mondayData = [];
var tuesdayData = [];
var wednesdayData = [];
var thursdayData = [];
var fridayData = [];
var saturdayData = [];
var sundayData = [];
var curr = new Date; // get current date
var mon = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
var monday = new Date(curr.setDate(mon));
var tue = curr.getDate() - curr.getDay() + 1; // First day is the day of the month - the day of the week
var tuesday = new Date(curr.setDate(tue));
var wed = curr.getDate() - curr.getDay() + 2; // First day is the day of the month - the day of the week
var wednesday = new Date(curr.setDate(wed));
var thu = curr.getDate() - curr.getDay() + 3; // First day is the day of the month - the day of the week
var thursday = new Date(curr.setDate(thu));
var fri = curr.getDate() - curr.getDay() + 4; // First day is the day of the month - the day of the week
var friday = new Date(curr.setDate(fri));
var sat = curr.getDate() - curr.getDay() + 5; // First day is the day of the month - the day of the week
var saturday = new Date(curr.setDate(sat));
var sun = curr.getDate() - curr.getDay() + 6; // First day is the day of the month - the day of the week
var sunday = new Date(curr.setDate(sun));
for (var i = 0; i < thisWeek.length; i++) {
var parts = thisWeek[i].Datum.split('-');
var mydate = new Date(Date.UTC(parts[2], parts[1] - 1, parts[0]));
if (mydate > monday && mydate < tuesday) {
mondayData.push(thisWeek[i]);
}
if (mydate > tuesday && mydate < wednesday) {
tuesdayData.push(thisWeek[i]);
}
if (mydate > wednesday && mydate < thursday) {
wednesdayData.push(thisWeek[i]);
}
if (mydate > thursday && mydate < friday) {
thursdayData.push(thisWeek[i]);
}
if (mydate > friday && mydate < saturday) {
fridayData.push(thisWeek[i]);
}
if (mydate > saturday && mydate < sunday) {
saturdayData.push(thisWeek[i]);
}
if (mydate > sunday) {
sundayData.push(thisWeek[i]);
}
}
// writeData(sortMonday(mondayData));
viewMonday(sortMonday(mondayData));
viewTuesday(sortTuesday(tuesdayData));
viewWednesday(sortTuesday(wednesdayData));
viewThursday(sortThursday(thursdayData));
viewFriday(sortFriday(fridayData));
viewSaturday(sortSaturday(saturdayData));
viewSunday(sortSunday(sundayData));
}
function sortMonday(monday) {
var aerobicMonday = [];
var crossboxMonday = [];
for (var i = 0; i < monday.length; i++) {
if (aerobic.includes(monday[i].Activiteit)) {
aerobicMonday.push(monday[i]);
}
if (crossbox.includes(monday[i].Activiteit)) {
crossboxMonday.push(monday[i]);
} else {
}
}
//return toevoegen overal behalve maandag
return [aerobicMonday, crossboxMonday];
}
function sortTuesday(tuesday) {
var aerobicTuesday = [];
var crossboxTuesday = [];
for (var i = 0; i < tuesday.length; i++) {
if (aerobic.includes(tuesday[i].Activiteit)) {
aerobicTuesday.push(tuesday[i]);
}
if (crossbox.includes(tuesday[i].Activiteit)) {
crossboxTuesday.push(tuesday[i]);
} else {
}
}
return [aerobicTuesday, crossboxTuesday];
}
function sortWednesday(wednesday) {
var aerobicWednesday = [];
var crossboxWednesday = [];
for (var i = 0; i < wednesday.length; i++) {
if (aerobic.includes(wednesday[i].Activiteit)) {
aerobicWednesday.push(wednesday[i]);
}
if (crossbox.includes(wednesday[i].Activiteit)) {
crossboxWednesday.push(wednesday[i]);
} else {
}
}
return [aerobicWednesday, crossboxWednesday];
}
function sortThursday(thursday) {
var aerobicThursday = [];
var crossboxThursday = [];
for (var i = 0; i < thursday.length; i++) {
if (aerobic.includes(thursday[i].Activiteit)) {
aerobicThursday.push(thursday[i]);
}
if (crossbox.includes(thursday[i].Activiteit)) {
crossboxThursday.push(thursday[i]);
} else {
}
}
return [aerobicThursday, crossboxThursday];
}
function sortFriday(friday) {
var aerobicFriday = [];
var crossboxFriday = [];
for (var i = 0; i < friday.length; i++) {
if (aerobic.includes(friday[i].Activiteit)) {
aerobicFriday.push(friday[i]);
}
if (crossbox.includes(friday[i].Activiteit)) {
crossboxFriday.push(friday[i]);
} else {
}
}
return [aerobicFriday, crossboxFriday];
}
function sortSaturday(saturday) {
var aerobicSaturday = [];
var crossboxSaturday = [];
for (var i = 0; i < saturday.length; i++) {
if (aerobic.includes(saturday[i].Activiteit)) {
aerobicSaturday.push(saturday[i]);
}
if (crossbox.includes(saturday[i].Activiteit)) {
crossboxSaturday.push(saturday[i]);
} else {
}
}
return [aerobicSaturday, crossboxSaturday];
}
function sortSunday(sunday) {
var aerobicSunday = [];
var crossboxSunday = [];
for (var i = 0; i < sunday.length; i++) {
if (aerobic.includes(sunday[i].Activiteit)) {
aerobicSunday.push(sunday[i]);
}
if (crossbox.includes(sunday[i].Activiteit)) {
crossboxSunday.push(sunday[i]);
} else {
}
}
return [aerobicSunday, crossboxSunday];
}
function viewMonday(mondayData) {
var aerobic = "";
var crossbox = "";
if (mondayData[0].length > 0) {
for (var i = 0; i < mondayData.length; i++) {
aerobic += '<p>' + '<b>' + mondayData[0][i].Starttijd + ' t/m ' + mondayData[0][i].Eindtijd + '</b> - ' + mondayData[0][i].Activiteit + '</p>'
}
} else {
aerobic = "geen lessen";
}
if (mondayData[1].length > 0) {
for (var i = 0; i < mondayData.length; i++) {
crossbox += '<p>' + '<b>' + mondayData[1][i].Starttijd + ' t/m ' + mondayData[1][i].Eindtijd + '</b> - ' + mondayData[1][i].Activiteit + '</p>'
}
} else {
crossbox = "geen lessen";
}
document.getElementById("monday-aerobic").innerHTML = aerobic;
document.getElementById("monday-crossbox").innerHTML = crossbox;
}
function viewTuesday(tuesdayData) {
var aerobic = "";
var crossbox = "";
if (tuesdayData[0].length > 0) {
for (var i = 0; i < tuesdayData[0].length; i++) {
aerobic += '<p>' + '<b>' + tuesdayData[0][i].Starttijd + ' t/m ' + tuesdayData[0][i].Eindtijd + '</b> - ' + tuesdayData[0][i].Activiteit + '</p>'
}
} else {
aerobic = "geen lessen";
}
if (tuesdayData[1].length > 0) {
for (var i = 0; i < tuesdayData[1].length; i++) {
crossbox += '<p>' + '<b>' + tuesdayData[1][i].Starttijd + ' t/m ' + tuesdayData[1][i].Eindtijd + '</b> - ' + tuesdayData[1][i].Activiteit + '</p>'
}
} else {
crossbox = "geen lessen";
}
document.getElementById("tuesday-aerobic").innerHTML = aerobic;
document.getElementById("tuesday-crossbox").innerHTML = crossbox;
}
function viewWednesday(wednesdayData) {
var aerobic = "";
var crossbox = "";
if (wednesdayData[0].length > 0) {
for (var i = 0; i < wednesdayData[0].length; i++) {
aerobic += '<p>' + '<b>' + wednesdayData[0][i].Starttijd + ' t/m ' + wednesdayData[0][i].Eindtijd + '</b> - ' + wednesdayData[0][i].Activiteit + '</p>'
}
} else {
aerobic = "geen lessen";
}
if (wednesdayData[1].length > 0) {
for (var i = 0; i < wednesdayData[1].length; i++) {
crossbox += '<p>' + '<b>' + wednesdayData[1][i].Starttijd + ' t/m ' + wednesdayData[1][i].Eindtijd + '</b> - ' + wednesdayData[1][i].Activiteit + '</p>'
}
} else {
crossbox = "geen lessen";
}
document.getElementById("wednesday-aerobic").innerHTML = aerobic;
document.getElementById("wednesday-crossbox").innerHTML = crossbox;
}
function viewThursday(thursdayData) {
var aerobic = "";
var crossbox = "";
if (thursdayData[0].length > 0) {
for (var i = 0; i < thursdayData[0].length; i++) {
aerobic += '<p>' + '<b>' + thursdayData[0][i].Starttijd + ' t/m ' + thursdayData[0][i].Eindtijd + '</b> - ' + thursdayData[0][i].Activiteit + '</p>'
}
} else {
aerobic = "geen lessen";
}
if (thursdayData[1].length > 0) {
for (var i = 0; i < thursdayData[1].length; i++) {
crossbox += '<p>' + '<b>' + thursdayData[1][i].Starttijd + ' t/m ' + thursdayData[1][i].Eindtijd + '</b> - ' + thursdayData[1][i].Activiteit + '</p>'
}
} else {
crossbox = "geen lessen";
}
document.getElementById("thursday-aerobic").innerHTML = aerobic;
document.getElementById("thursday-crossbox").innerHTML = crossbox;
}
function viewFriday(fridayData) {
console.log(fridayData);
var aerobic = "";
var crossbox = "";
if (fridayData[0].length > 0) {
for (var i = 0; i < fridayData[0].length; i++) {
aerobic += '<p>' + '<b>' + fridayData[0][i].Starttijd + ' t/m ' + fridayData[0][i].Eindtijd + '</b> - ' + fridayData[0][i].Activiteit + '</p>'
}
}
else {
aerobic = "geen lessen";
}
if (fridayData[1].length > 0) {
for (var i = 0; i < fridayData[1].length; i++) {
crossbox += '<p>' + '<b>' + fridayData[1][i].Starttijd + ' t/m ' + fridayData[1][i].Eindtijd + '</b> - ' + fridayData[1][i].Activiteit + '</p>'
}
} else {
crossbox = "geen lessen";
}
document.getElementById("friday-aerobic").innerHTML = aerobic;
document.getElementById("friday-crossbox").innerHTML = crossbox;
}
function viewSaturday(saturdayData) {
var aerobic = "";
var crossbox = "";
if (saturdayData[0].length > 0) {
for (var i = 0; i < saturdayData[0].length; i++) {
aerobic += '<p>' + '<b>' + saturdayData[0][i].Starttijd + ' t/m ' + saturdayData[0][i].Eindtijd + '</b> - ' + saturdayData[0][i].Activiteit + '</p>'
}
}
else {
aerobic = "geen lessen";
}
if (saturdayData[1].length > 0) {
for (var i = 0; i < saturdayData[1].length; i++) {
crossbox += '<p>' + '<b>' + saturdayData[1][i].Starttijd + ' t/m ' + saturdayData[1][i].Eindtijd + '</b> - ' + saturdayData[1][i].Activiteit + '</p>'
}
} else {
crossbox = "geen lessen";
}
document.getElementById("saturday-aerobic").innerHTML = aerobic;
document.getElementById("saturday-crossbox").innerHTML = crossbox;
}
function viewSunday(sundayData) {
var aerobic = "";
var crossbox = "";
if (sundayData[0].length > 0) {
for (var i = 0; i < sundayData[0].length; i++) {
aerobic += '<p>' + '<b>' + sundayData[0][i].Starttijd + ' t/m ' + sundayData[0][i].Eindtijd + '</b> - ' + sundayData[0][i].Activiteit + '</p>'
}
} else {
aerobic = "geen lessen";
}
if (sundayData[1].length > 0) {
for (var i = 0; i < sundayData[1].length; i++) {
crossbox += '<p>' + '<b>' + sundayData[1][i].Starttijd + ' t/m ' + sundayData[1][i].Eindtijd + '</b> - ' + sundayData[1][i].Activiteit + '</p>'
}
} else {
crossbox = "geen lessen";
}
document.getElementById("sunday-aerobic").innerHTML = aerobic;
document.getElementById("sunday-crossbox").innerHTML = crossbox;
}<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/xlsx.full.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/jszip.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="hrm.js"></script>
</head>
<body>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" onclick="Upload()" />
<button onclick="Alert()">click me</button>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/Maandag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="monday-aerobic">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/Dinsdag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="tuesday-aerobic">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/Woensdag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="wednesday-aerobic">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/donderdag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="thursday-aerobic">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/Vrijdag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="friday-aerobic">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/Zaterdag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="saturday-aerobic">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/Zondag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="sunday-aerobic">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/Maandag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="monday-crossbox">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/Dinsdag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="tuesday-crossbox">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/Woensdag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="wednesday-crossbox">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/donderdag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="thursday-crossbox">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/Vrijdag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="friday-crossbox">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/Zaterdag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="saturday-crossbox">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://www.hrmfitness.nl/wp-content/uploads/2019/09/Zondag_Tekengebied-1-min.png" alt="" class="img-icon-events">
</div>
<div class="col-sm-10" id="sunday-crossbox">
</div>
</div>
</div>
</div>
</div>
</body>
我希望启动上传功能，但现在收到错误：
(index): 57 Uncaught ReferenceError: Upload is not defined
at HTMLInputElement.onclick