如何使用ejs修复节点中的“未定义文档”
[英]How to fix “document is not defined” in node with ejs
问题描述
I just started learning javascript and nodejs(express and ejs) to develop my portfolio. 
我刚刚开始学习javascript和nodejs（express和ejs）以开发自己的产品组合。 when I run the javascript below, I bump into the error "document is not defined" . 当我运行下面的JavaScript时，遇到错误"document is not defined" 。 could someone help me out? 有人可以帮我吗？
Terminal tells this error. 终端告诉这个错误。
ReferenceError: document is not defined at Object.
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 个解决方案
解决方案1
1 2019-05-06 03:15:03
document exists in browsers only, so below code show be in js file imported by html 该文档仅在浏览器中存在，因此以下代码显示在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>
let's say your main code is index.js 假设您的主要代码是index.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);
})
you should start your server this way: 您应该以这种方式启动服务器：
node index.js
Glad to know that you have shared your code through GitHub. 很高兴知道您已经通过GitHub共享了代码。
I've just cloned your repo and here is my question: 我刚刚克隆了您的仓库，这是我的问题：
I see this code 我看到这个代码
const menuBtn = document.querySelector('.btn-menu');
Since I have all your code, I did a search, but I failed to found an match. 由于有了您的所有代码，因此我进行了搜索，但找不到匹配项。
So my question is where is this btn-menu ? 所以我的问题是，这个btn-menu哪里？
Can you share with us more context, Thanks 能否与我们分享更多背景信息，谢谢
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.