我試圖將變數匯出到另一個模塊，但發生錯誤。未捕獲的語法錯誤：意外的標記“匯出”。檔案結構：./css: select.css style.css
./html: index.html make.html select.html
./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);
選擇.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>
選擇.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>
make.js：
import * as settings from "./select.js";
for (i=0; i <= width; i ) {
document.createElement('input') * settings.width;
console.log(settings.height);
}
我對網路很陌生。對不起，如果這只是我的錯。
uj5u.com熱心網友回復：
問題來自函式 handleClickMakeBtn
你不能在這樣的函式中匯出物件
如果你想回傳值，你必須使用關鍵字 return
但是就像寬度和高度是全域變數一樣，當您在函式中修改它時，它會修改全域變數
uj5u.com熱心網友回復：
您只能在檔案的頂層（即不在函式內）匯出內容。
但是，您可以使用 window 物件從任何地方訪問變數。
像這樣
function handleClickMakeBtn() {
width = parseInt(width_textbox.value);
height = parseInt(height_textbox.value);
window.settings = { width, height }
}
現在您可以從任何地方訪問該物件。
喜歡window.settings。我不推薦這種方式，相反，您可以在模塊內創建一個全域物件并在頂層匯出它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/381597.html
標籤：javascript html css