Uncaught SyntaxError: Unexpected token 'export'-CodePudding

I tried to export variables to another module, but error occured. Uncaught SyntaxError: Unexpected token 'export'. File structure: ./css: select.css style.css

./html: index.html make.html select.html

./javascript: make.js script.js select.js

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Search Maker</title>
</head>
<body>
    <div >
        <h1>
            Simple Word Search maker
        </h1>
    </div>
    <div >
        <button id="start-button">Start ➝</button>    
    </div>
    <script src="/javascript/script.js"></script>
    <link rel="stylesheet" href="/css/style.css">
</body>
</html>

script.js

const startButton = document.querySelector("#start-button");
const activeclass = "active";

function handlestartBtnMouseEnter() {
    startButton.classList.add(activeclass);
}

function handlestartBtnMouseLeave() {
    startButton.classList.remove(activeclass);
}

function handleStartBtnClick() {
    window.location.href = "/html/select.html";
}

startButton.addEventListener("mouseenter", handlestartBtnMouseEnter);
startButton.addEventListener("mouseleave", handlestartBtnMouseLeave);
startButton.addEventListener("click", handleStartBtnClick);

select.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Making Basic template</title>
</head>
<body>
    <h1>
        Basic template:
    </h1>
    <div >
        width: <input type="text" id="width">
        <br>
        height: <input type="text" id="height">
    </div>
    <button id= "make-button">Make</button>
    <script type="module" src="/javascript/select.js"></script>
</body>
</html>

select.js:

let width_textbox = document.getElementById("width");
let height_textbox = document.getElementById("height");
let width = null;
let height = null;

const makebutton = document.querySelector("#make-button");

function handleClickMakeBtn() {
    width = parseInt(width_textbox.value);
    height = parseInt(height_textbox.value);
    if (width > 30 || height > 30) {
        alert("Width and height cannot longer than 30!");
        width_textbox.value = "";
        height_textbox.value = "";
        } else if (width < 5 || height < 5) {
        alert("Width and height cannot shorter than 5!");
        width_textbox.value = "";
        height_textbox.value = "";
    } else if (isNaN(width) || isNaN(height)) {
        alert("Width and height must be number!");
        width_textbox.value = "";
        height_textbox.value = "";
    } else if (width == null || height == null) {
        alert("You have to enter width and height!");
    } 
    else {
        window.location.href = "/html/make.html";
    }
    export { width, height }
}



makebutton.addEventListener("click", handleClickMakeBtn);

make.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Make word search</title>
</head>
<body>
    <script type="module" src="/javascript/make.js"></script>
</body>
</html>

make.js:

import * as settings from "./select.js";

for (i=0; i <= width; i   ) {
    document.createElement('input') * settings.width;
    console.log(settings.height);
}

I'm very new to web. Sorry if it's just my mistake.

CodePudding user response：

the issue come from function handleClickMakeBtn

you can't export object in function like that

if you want to return value you have to use the keyword return

but like width and height are global variable when you modify it in function it's modify the global variable

CodePudding user response：

You can only export stuff only at the top-level of the file (ie not inside a function).

However you can use window object to access the variable from anywhere.

like this

function handleClickMakeBtn() {
    width = parseInt(width_textbox.value);
    height = parseInt(height_textbox.value);
    window.settings = { width, height }
}

now you can access the object from anywhere.

like window.settings. I don't recommend this way instead you can create a global object inside the module and export that at top level.