Node.js 在初始化和全局变量问题之前无法访问词法声明'x'

Question

我正在制作的 node.js 应用程序有问题。这是我第一次使用 node.js，所以我知道会有问题，但到目前为止我无法解决这个问题。我想在单击站点上的按钮后运行脚本，但我 在初始化之前无法访问词法声明“日志” 错误，我认为这是因为我使用的是全局变量，因为控制台也显示此错误消息require is not defined。

这是我导出的脚本代码：

let login 
{
    login: Cat;
    haslo: 123;
}

function Logowanie(x, y){
    
        if (x == login.login && y == login.haslo){
            const zmianaTla = document.getElementById('overlay');
            const udanyLogin = document.getElementById('logon');
            zmianaTla.classList.remove('active');
            udanyLogin.remove();
        }
       else
            alert("Niepoprawny login lub haslo");
}
    

module.exports = new Logowanie;

主脚本：

const log=require('./login.js');

x=document.getElementById('login').value;
y=document.getElementById('haslo').value; 

log(x, y)

还有html部分：

<script src="script.js"></script>
<div class="logon" id="logon">
     <h1>Logowanie</h1>
      <label for="Log"><b>Login</b></label>
       <input type="text" id="login" name="login" required>
            <label for="Haslo"><b>Hasło</b></label>
            <input type="password" id="haslo" name="haslo" required>
            <button type="submit" class="b1" onClick="log()"> Login </button>
    </div>
    <div class="active" id="overlay"></div>

我尝试使用其他用户遇到的类似问题的解决方案来解决它，但他们没有工作，所以我最终决定自己寻求帮助。

编辑：我忘了提到我在 Visual Code Studio 中使用命令行运行应用程序。这是代码：

const express = require('express');
const app = express();
const path = require("path");
const http = require("http");
const hostname = '127.0.0.1';
const port = 3000;

app.listen(port, () => console.info('Listening on port 3000'));

app.use(express.static('public'))
app.use(express.static(path.join(__dirname, './public/css')))
app.use(express.static(path.join(__dirname, './public/img')))
app.use(express.static(path.join(__dirname, './public/js')))

app.get('',(req, res) => {
    res.sendFile(path.join(__dirname, './views/index.html'))
})

两个脚本在同一个文件夹中，但在不同的文件中（我使用的是全局变量，所以在现场检查期间function Logowanie() 不可见。

Answer 1

好的，自从那次编辑后我就明白了。以下是您需要进行的更改才能使其正常工作。如果有任何不清楚的地方请告诉我，我可以帮助澄清。

你走在正确的轨道上，我认为只是模块导入/导出和函数绑定把你搞砸了。波尔?。

有用的文档：

• script type="module" docs
• window object docs
• anonymous functions docs（用于将log绑定到window）

login.js

// = sign was missing
let login = {
    // Cat is a String and needs quotes. Semicolons need to be commas in js object declarations
    login: "Cat",
    haslo: 123
}

function Logowanie(x,y){
    // should use === here not ==
    if (x === login.login && y === login.haslo) {
        // your code
    }
}

// Export your function from this file. This is ES6 module syntax supported in modern browsers. FYI you cannot use CommonJS style module.exports in a browser without Webpack or similar setup.
export default Logowanie;

script.js

// Using ES6 module syntax to import your function. Note that you don't actually have to name it Logowanie as we used the default export.
import Logowanie from "./login.js";

// because we are using ES6 module syntax, you need to define the "log" function on the window object of the webpage. This is so the browser knows what to do if when we call log() onclick basically.
window.log = () => {
    let x = document.getElementById("login").value;
    let y = document.getElementById("haslo").value;

    // Logwanie function in login.js is expecting y to be an int due to === comparison.
    Logowanie(x, parseInt(y));
};

index.html

<!-- the type="module" is needed to use ES6 module syntax -->
<script type="module" src="script.js"></script>

<!-- the rest of your HTML was fine I believe -->