如何使用ejs修复节点中的“文档未定义”答案

【问题标题】：How to fix "document is not defined" in node with ejs如何使用ejs修复节点中的“文档未定义”
【发布时间】：2019-09-23 16:23:45
【问题描述】：

我刚开始学习 javascript 和 nodejs（express 和 ejs）来开发我的作品集。当我运行下面的 javascript 时，我遇到了错误 "document is not defined"。有人可以帮帮我吗？
终端告诉这个错误。

ReferenceError: 文档未定义在对象。 (C:\Users\milkc\WebDevelopment\Practice\sassPortfolio\index.js:21:17) 在 Module._compile (internal/modules/cjs/loader.js:701:30) 在 Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) 在 Module.load (internal/modules/cjs/loader.js:600:32) 在 tryModuleLoad (internal/modules/cjs/loader.js:539:12) 在 Function.Module._load (internal/modules/cjs/loader.js:531:3) 在 Function.Module.runMain (internal/modules/cjs/loader.js:754:12) 启动时（内部/bootstrap/node.js:283:19）在 bootstrapNodeJSCore (internal/bootstrap/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>

【问题讨论】：

您的Select Dom Item 部分是quiz.js 或其他js 的一部分吗？

标签： javascript node.js express ejs

【解决方案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>

假设你的主要代码是 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);

})

你应该这样启动你的服务器：

node index.js

很高兴知道您已通过 GitHub 共享您的代码。

我刚刚克隆了你的仓库，这是我的问题：

我看到了这段代码

const menuBtn = document.querySelector('.btn-menu');

因为我有你的所有代码，所以我进行了搜索，但没有找到匹配项。

所以我的问题是这个btn-menu在哪里？

您能否与我们分享更多背景信息，谢谢

【讨论】：

非常感谢，这么快的回复。我在终端中运行“node index.js”。但是，我仍然有同样的错误。如果我能学习其他解决方案，我真的很感激
@ShintaroKai 可以和我们分享一下文件夹结构吗？
@ShintaroKai 再提一点建议，既然是你的个人学习项目，你可以把代码放到GitHub上，我们可以帮你做得更好。
感谢您的好意。这是我的存储库。 github.com/milkcanbass/portfolio
@ShintaroKai 感谢您的合作。我将编辑我的回复。