Okay, so here's the issue:I was trying to export the arr from script.js to script1.js, but I get this
Uncaught SyntaxError: Cannot use import statement outside a module (at script1.js:1:1)The js files are in a folder which is in the same directory as the html files. It's a form that takes input in index.html and stores in script.js, but then, it stores the inputs in an array and exports it, which is imported in script1.js.
Could someone please help me out with this?
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Timetable Scheduler</title><link rel="shortcut icon" href="https://www.freeiconspng.com/thumbs/calendar-image-png/calendar-image-png-3.png" type="image/x-icon"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script><style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background-color: #212529; background-image: url("https://www.transparenttextures.com/patterns/dark-wood.png"); } form { margin: 50px; }</style><script type="module" src="script/script.js"></script></head><body class="bg-dark text-light"><h1>Timetable Scheduler</h1><form id="form" action="./Scheduler" class="d-flex justify-content-center align-items-center flex-column" method="post"><div class="row"><div class="col-md-6 col-sm-12 col-lg-3 d-flex flex-column justify-content-end pt-4"><label for="" class="form-label">Enter number of classes in a day (including leisure hours) </label><input value="" type="number" class="form-control" name="totalHours" id="totalHours" required></div><div class="col-md-6 col-sm-12 col-lg-3 d-flex flex-column justify-content-end pt-4"><label for="" class="form-label">Enter duration of each hour (in minutes) </label><input value="" type="number" class="form-control" name="classDuration" id="classDuration" required></div><div class="col-md-6 col-sm-12 col-lg-3 d-flex flex-column justify-content-end pt-4"><label for="" class="form-label">Enter classes start time </label><input value="" type="time" class="form-control" name="startTime" id="startTime" required></div><div class="col-md-6 col-sm-12 col-lg-3 d-flex flex-column justify-content-end pt-4"><label for="" class="form-label">Enter classes ending time </label><input value="" type="time" class="form-control" name="endTime" id="endTime" required></div></div><input type="hidden" name="arr" id="arr" value=""><div class="row col-lg-3 d-flex justify-content-center"><input type="submit" value="build timetable" class="btn btn-outline-light mt-5"></div></form></body></html>script.js
var arr = [];var totalHoursVal = document.getElementById("totalHours").value;arr.push(totalHoursVal);var classDurationVal = document.getElementById("classDuration").value;arr.push(classDurationVal);var startTimeVal = document.getElementById("startTime").value;arr.push(startTimeVal);var endTimeVal = document.getElementById("endTime").value;arr.push(endTimeVal);console.log(arr)export function stuff() { return arr};build-timetable.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Build Timetable</title><link rel="shortcut icon" href="https://www.freeiconspng.com/thumbs/calendar-image-png/calendar-image-png-3.png" type="image/x-icon"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script><style> *::-webkit-scrollbar { display: none; } body { min-height: 100vh; max-width: 100vw; display: flex; flex-direction: column; background-color: #212529; background-image: url("https://www.transparenttextures.com/patterns/dark-wood.png"); } table { border-collapse: collapse; width: 100%; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: center; } #timetableContainer { width: fit-content; }</style><script type="text/javascript" src="script/script1.js"></script></head><body class="bg-dark text-light d-flex flex-column align-items-center justify-content-center"><h1 style="text-align: center; margin-top: 10px;">Timetable Builder</h1><form action="./Classes" method="post" class="mt-5 d-flex justify-content-center align-items-center flex-column"><div class="row"><div class="col-md-6 col-sm-12 col-lg-4 d-flex flex-column justify-content-end ps-5 pe-5 pb-5"><label for="className" class="form-label">Enter class name</label><input type="text" class="form-control" id="className" required></div><div class="col-md-6 col-sm-12 col-lg-4 d-flex flex-column justify-content-end ps-5 pe-5 pb-5"><label for="classroomNum" class="form-label">Enter classroom number</label><input type="text" class="form-control" id="classroomNum" required></div><div class="col-md-6 col-sm-12 col-lg-4 d-flex flex-column justify-content-end ps-5 pe-5 pb-5"><label for="classCoord" class="form-label">Enter Class Coordinator Name</label><input type="text" class="form-control" id="classCoord" required></div></div><div id="classes" onload="classes()"></div><div class="container-fluid mt-4 mb-5"><div class="row"><div class="col-lg-6 col-md-6 col-sm-12"><button type="reset" class="btn btn-outline-danger w-100 mb-3">clear all</button></div><div class="col-lg-6 col-md-6 col-sm-12"><button type="submit" class="btn btn-light w-100">save all and continue</button></div></div></div></form></body></html>script1.js
import stuff from './script1.js';var hours = stuff()[0];console.log(hours);var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]window.onload = function classes() { var classesForm = document.getElementById("classes"); for(var k = 0; k < days.length; k++) { var day = document.createElement("h3"); day.classList.add("mt-5") day.classList.add("container-fluid") day.innerHTML = days[k]; classesForm.appendChild(day); var div = document.createElement("div"); for (var i = 0; i < hours; i++) { if (i % 3 == 0) { div = document.createElement("div"); div.classList.add("row"); div.classList.add("container-fluid"); div.classList.add("w-100"); div.style.padding = '0'; div.style.margin = '0'; } var divChild = document.createElement("div"); divChild.classList.add("col-lg-4"); divChild.classList.add("col-md-4"); divChild.classList.add("col-sm-10"); var label = document.createElement("label"); label.textContent = "Enter hour " + (i + 1) +" subject:"; var input = document.createElement("input"); input.type = "text"; input.required = true; input.name = `${k}-${i}` input.classList.add("form-control"); input.classList.add("mt-2"); input.classList.add("mb-4"); divChild.appendChild(label); divChild.appendChild(input); div.appendChild(divChild); if ((i + 1) % 3 == 0 || i == hours - 1) { classesForm.appendChild(div); } } }}