未捕获的 SyntaxError：意外的令牌“导出”答案

【问题标题】：Uncaught SyntaxError: Unexpected token 'export'未捕获的 SyntaxError：意外的令牌“导出”
【发布时间】：2021-12-15 13:46:17
【问题描述】：

我尝试将变量导出到另一个模块，但出现错误。未捕获的 SyntaxError：意外的令牌“导出”。文件结构： ./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 class="title-h1">
        <h1>
            Simple Word Search maker
        </h1>
    </div>
    <div class="start">
        <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 class="settings">
        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);
}

我对网络很陌生。对不起，如果这只是我的错误。

【问题讨论】：

你应该返回一个值而不是导出它

标签： javascript html css

【解决方案1】：

问题来自函数句柄ClickMakeBtn

你不能在这样的函数中导出对象

如果你想返回值，你必须使用关键字return

但是像宽度和高度一样是全局变量，当你在函数中修改它时它会修改全局变量

【讨论】：

【解决方案2】：

您只能在文件的顶层（即不能在函数内部）导出内容。

但是，您可以使用 window 对象从任何地方访问变量。

喜欢这个

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

现在您可以从任何地方访问该对象。

喜欢window.settings。我不推荐这种方式，您可以在模块内创建一个全局对象并将其导出到顶层。

【讨论】：