问题：
如何修复"文档未定义"在节点与ejs
卫逸春
我刚开始学习javascript和nodejs（express和ejs）来开发我的公文包。当我运行下面的javascript时，我遇到了错误“文档未定义”。有人能帮我吗
终端显示此错误。
在Object中未定义文档。（C：\用户\milkc\WebDevelopment\实践\sassPortfolio\index.js:21： 17）。_compile（内部/模块/cjs/loader.js:701： 30）在对象。_extensions... js（内部/模块/cjs/loader.js:712： 10）在Module.load（内部/模块/cjs/loader.js:600： 32）在tryModuleLoad（内部/模块/cjs/loader.js:539： 12）在函数。模块。_load（内部/模块/cjs/loader.js:531： 3）在函数。Module.run主（内部/模块/cjs/loader.js:754： 12）在启动（内部/引导/node.js:283： 19）在bootstrapNodeJSCore（内部/引导/node.js:622： 3）
const express = require('express');
const app = express();
const port = 3000;
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.get('/', (req, res) => {
res.render('index');
})
app.listen(port, () => {
console.log('App listening on port' + port);
})
//Select Dom Item
const menuBtn = document.querySelector('.btn-menu');
const menu = document.querySelector('.menu');
const menuNav = document.querySelector('.menu-nav');
const menuBranding = document.querySelector('.menu-branding');
const navItems = document.querySelectorAll('.nav-item');
// Set Initial state of menu
let showMenu = false;
menuBtn.addEventListener('click', toggleMenu);
function toggleMenu() {
if (!showMenu) {
menuBtn.classList.add('close');
menu.classList.add('show');
menuNav.classList.add('show');
menuBranding.classList.add('show');
navItems.forEach(item => item.classList.add('sjow'));
} else {
// Set Menu State
showMenu = true;
menuBtn.classList.remove('close');
menu.classList.remove('show');
menuNav.classList.remove('show');
menuBranding.classList.remove('show');
navItems.forEach(item => item.classList.remove('sjow'));
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- GoogleFont -->
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/main.css">
<title>Shintaro Kai</title>
</head>
<body id='bg-img'>
<header>
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<nav class="menu">
<div class="menu-branding">
<div class="portrait"></div>
<ul class="menu-nav">
<li class="nav-item">
<a href="" class="nav-link">
Home
</a>
</li>
<li class="nav-item">
<a href="/about.html" class="nav-link">
About Me
</a>
</li>
<li class="nav-item">
<a href="/work.html" class="nav-link">
My Work
</a>
</li>
<li class="nav-item">
<a href="/contact.html" class="nav-link">
How to reach me
</a>
</li>
</ul>
</div>
</nav>
</header>
<main id="home">
<h1 class="lg-heading">
Shintaro <span class="text-secondary"> Kai </span>
</h1>
<h2 class="sm-heading">
Web Developer, Game Designer and Video Contents Creator
</h2>
<div class="icons">
<a href="#!">
<i class="fab fa-linkedin fa-2x"></i>
</a>
<a href="#!">
<i class="fab fa-facebook fa-2x"></i>
</a>
<a href="#!">
<i class="fab fa-github fa-2x"></i>
</a>
</div>
</main>
<script src='js/main.js'></script>
<script type="text/javascript" src="js/quiz.js"></script>
</body>
</html>共有1个答案
冯通
文档只存在于浏览器中，所以下面的代码显示为html导入的js文件
//code.js
//Select Dom Item
const menuBtn = document.querySelector('.btn-menu');
const menu = document.querySelector('.menu');
const menuNav = document.querySelector('.menu-nav');
const menuBranding = document.querySelector('.menu-branding');
const navItems = document.querySelectorAll('.nav-item');
// Set Initial state of menu
let showMenu = false;
menuBtn.addEventListener('click', toggleMenu);
function toggleMenu() {
if (!showMenu) {
menuBtn.classList.add('close');
menu.classList.add('show');
menuNav.classList.add('show');
menuBranding.classList.add('show');
navItems.forEach(item => item.classList.add('sjow'));
} else {
// Set Menu State
showMenu = true;
menuBtn.classList.remove('close');
menu.classList.remove('show');
menuNav.classList.remove('show');
menuBranding.classList.remove('show');
navItems.forEach(item => item.classList.remove('sjow'));
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- GoogleFont -->
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/main.css">
<title>Shintaro Kai</title>
</head>
<body id='bg-img'>
<header>
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<nav class="menu">
<div class="menu-branding">
<div class="portrait"></div>
<ul class="menu-nav">
<li class="nav-item">
<a href="" class="nav-link">
Home
</a>
</li>
<li class="nav-item">
<a href="/about.html" class="nav-link">
About Me
</a>
</li>
<li class="nav-item">
<a href="/work.html" class="nav-link">
My Work
</a>
</li>
<li class="nav-item">
<a href="/contact.html" class="nav-link">
How to reach me
</a>
</li>
</ul>
</div>
</nav>
</header>
<main id="home">
<h1 class="lg-heading">
Shintaro <span class="text-secondary"> Kai </span>
</h1>
<h2 class="sm-heading">
Web Developer, Game Designer and Video Contents Creator
</h2>
<div class="icons">
<a href="#!">
<i class="fab fa-linkedin fa-2x"></i>
</a>
<a href="#!">
<i class="fab fa-facebook fa-2x"></i>
</a>
<a href="#!">
<i class="fab fa-github fa-2x"></i>
</a>
</div>
</main>
<script src='js/code.js'></script>
<script type="text/javascript" src="js/quiz.js"></script>
</body>
</html>
假设您的主代码是索引。js
const express = require('express');
const app = express();
const port = 3000;
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.get('/', (req, res) => {
res.render('index');
})
app.listen(port, () => {
console.log('App listening on port' + port);
})
您应该这样启动您的服务器：
node index.js
很高兴知道你已经通过GitHub分享了你的代码。
我刚刚克隆了您的回购协议，下面是我的问题：
我看到这个代码了
const menuBtn = document.querySelector('.btn-menu');
因为我有你所有的代码，我做了搜索，但我没有找到匹配的。
所以我的问题是这个btn菜单在哪里？
你能和我们分享更多的情况吗，谢谢
类似资料：
-
问题内容： 我已经通过npm install安装了节点模块，然后尝试在命令提示符下执行gulp sass-watch。之后，我得到以下回应。 在gulp sass-watch之前尝试过这个 问题答案： 我遇到了同样的错误。我怀疑您正在使用节点12和gulp3。该组合不起作用：https : //github.com/gulpjs/gulp/issues/2324 从1月开始的以前的解决方法也不起作
-
我已经通过npm install安装了节点模块，然后我尝试在命令提示符下执行gulp sass-watch。之后我得到了下面的回应。 我以前也试过
-
问题内容： 我将使用ReadFile： 我该如何解决？ 问题答案： 使用包名称限定它：
-
我不知道我做错了什么，因为我对另一个程序使用了同样的方法，它完美地工作了... 提前致谢
-
问题内容： 从节点手册中，我可以使用来获得文件的目录，但是从REPL中，这似乎是未定义的。这是我的误解还是错误在哪里？ 问题答案： 仅在脚本中定义。在REPL中不可用。 尝试制作脚本 并运行它： 您将看到打印。 添加了背景说明：表示“此脚本的目录”。在REPL中，您没有脚本。因此，将没有任何实际意义。
-
我试图定义一些endpoint，并使用进行测试。在中，我有： 但是当我运行时，我会得到以下错误： 我如何解决这个问题？