好的，那么问题来了： 我试图将 arr 从 script.js 导出到 script1.js，但我得到了这个
Uncaught SyntaxError: Cannot use import statement outside a module (at script1.js:1:1)
js文件位于与html文件位于同一目录的文件夹中。它是一种在 index.html 中获取输入并存储在 script.js 中的表单，但随后，它将输入存储在数组中并将其导出，该数组在 script1.js 中导入。
有人可以帮我解决这个问题吗？
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
脚本.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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);
}
}
}
}
错误信息
未捕获的语法错误：无法在模块外部使用 import 语句（位于 script1.js:1:1）
告诉您在 script1.js 中至少有一个
importimport stuff from './script1.js';import<script type="text/javascript" type="module" src="script/script1.js"></script>