Html Question posted in
Some basic documentation can be found here.

Html – Importing variables from one JS file to another

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/[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>

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/[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);
            }
        }
    }
}
Tags:

2

Answers


  1. 0

    The error message of

    Uncaught SyntaxError: Cannot use import statement outside a module (at script1.js:1:1)

    tells you that inside script1.js you have at least an import command (notably import stuff from './script1.js';) but script1 was not specified to have a type of module. To fix the error, either get rid of the import statement and do without it, or specify that script1 is a module, via:

    <script type="text/javascript" type="module" src="script/script1.js"></script>
    Login or Signup to reply.
  2. 0

    From what I am seeing in your build-timetable.html you are using

    <script type="text/javascript" src="script/script1.js"></script>

    if you want to continue to use it this way you can import the other JS files in the order that is needed. If this is not that path you want to go you will need to use

    <script type="text/javascript" type="module" src="script/script1.js"></script>

    On the other hand something else I am seeing is in script1.js you are importing script1.js.

    import stuff from './script1.js';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search