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

Question

我试图将变量导出到另一个模块，但发生了错误。 未捕获的 SyntaxError：意外的令牌“导出”。 文件结构：./css：select.css style.css

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

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

索引.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>

脚本.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);

使.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>

制作.js：

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

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

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

Answer 1

问题来自 function handleClickMakeBtn

你不能像这样在 function 中导出 object

如果要返回值，则必须使用关键字 return

但是当您在 function 中修改它时，就像宽度和高度是全局变量一样，它会修改全局变量

Answer 2

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

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

像这样

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

现在您可以从任何地方访问 object。

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

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

问题描述

2 个解决方案

解决方案1
1 2021-12-15 13:49:35

解决方案2
0 2021-12-15 14:31:27

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

问题描述

2 个解决方案

解决方案1 1 2021-12-15 13:49:35

解决方案2 0 2021-12-15 14:31:27

解决方案1
1 2021-12-15 13:49:35

解决方案2
0 2021-12-15 14:31:27