错误：jQuery 需要一个带有文档的窗口。使用 ejs 和 javascript 创建一个hangman web app答案

【问题标题】：Error : jQuery requires a window with a document. Using ejs and javascript to create a hangman web app错误：jQuery 需要一个带有文档的窗口。使用 ejs 和 javascript 创建一个hangman web app
【发布时间】：2020-08-19 21:37:47
【问题描述】：

我想访问 js 文件中的“猜测”值以从 div 中删除类“lettercolor”，以便正确猜测的字母以默认黑色显示。如果另一个 js 文件可以保存猜测的值，我可以这样做，但我也不知道如何将 app.js 中的“猜测”值传递给另一个 js 文件。请提出更改或改进建议。

index.ejs

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Hangman</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">

  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>

<body>
  <h1>HANGMAN</h1>
  <div class="container-fluid">
    <div class="row">

      <% letterList.forEach(function(letter){ %>
      <div id=<%= letter %> class="col-lg-1 col-md-3 col-sm-4 letters lettercolor"><%= letter %></div>
      <% }); %>

    </div>
  </div>

  <form method="post">
    <input type="text" name="answer" value=""><br>
    <button type="submit" name="button">Go!</button>
  </form>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>

</html>

APP.JS

const express = require('express');
const randomWords = require('random-words');
const bodyParser = require('body-parser');
const ejs = require('ejs');
const $ = require('jquery')

const app = express();

const letterList = (randomWords().split(''))
const guessed = []
let count = 0

app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({extended:true}));
app.use(express.static("public"));

app.get("/", function(req, res){
  res.render("index", {letterList: letterList, guessed: guessed});
});

app.post("/", function(req, res){
  console.log(letterList)
  let letter = req.body.answer;
  if(letterList.includes(letter)){
    console.log("You're correct!");
    count += 1
    remove(letterList, letter)
    guessed.push(letter)
    $('#' + guessed[guessed.length - 1]).removeClass('lettercolor');
    console.log(guessed);
  }
  else{
    console.log("Wrong!");
  }
});

app.listen(3000, function(req, res){
  console.log("Server running on port 3000");
});

function remove(arr) {
    var what, a = arguments, L = a.length, ax;
    while (L > 1 && arr.length) {
        what = a[--L];
        while ((ax= arr.indexOf(what)) !== -1) {
            arr.splice(ax, 1);
        }
    }
    return arr;
}

样式.CSS

body{
  background-color: gray;
  text-align: center;
}

h1{
  text-align: center;
  font-family: 'Press Start 2P', cursive;
  font-size: 50px;
  letter-spacing: 8px;
}

input{
  height: 100px;
  width: 100px;
  font-size: 60px;
  text-align: center;
  text-transform: uppercase;
}

.container-fluid{
  width: 80%;
  text-align: center;
}

.row{
  display: inline-block;
}

.letters{
  background-color: ivory;
  user-select: none;
  border-radius: 10%;
  margin: 20px;
  height: 70px;
  width: 70px;
  font-size: 45px;
  text-transform: uppercase;
}

.lettercolor {
  color: ivory;
}

【问题讨论】：

标签： javascript jquery node.js web-applications ejs

【解决方案1】：

NodeJS 在您的服务器上运行，而不是在浏览器上。当您尝试操作节点服务器无法直接控制的 DOM 时，任何与 DOM/Document 相关的操作都会自然而然地失败。这是在浏览器和服务器端运行 JavaScript 的基本区别之一。 JQuery 只能在浏览器中工作。但是您的节点服务器可以生成 HTML 并将其发送到浏览器，这就是 ejs 所做的，被称为模板引擎。

【讨论】：