错误：jQuery需要一个window带证件。使用ejs和javascript创建刽子手web app

Question

I want to access a value "guessed" in the js file to delete a class "lettercolor" from the div so that the correctly guessed letter appears in the default black color.我想访问 js 文件中的值“guessed”以从 div 中删除 class“lettercolor”，以便正确猜测的字母以默认黑色显示。 I could do it if another js file could hold the guessed value but neither do I know how to pass the "guessed" values from app.js to another js file.如果另一个 js 文件可以保存猜测值，我可以做到这一点，但我也不知道如何将“猜测”值从 app.js 传递到另一个 js 文件。 Please do suggest changes or improvements.请提出更改或改进建议。

index.ejs索引.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应用程序.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;
}

STYLES.CSS STYLES.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;
}

Answer 1

NodeJS runs on your server and not on the browser. NodeJS 在您的服务器上运行，而不是在浏览器上运行。 Any operations related to DOM/Document will naturally fail as you're trying to manipulate the DOM which the node server can't control directly.当您试图操作节点服务器无法直接控制的 DOM 时，任何与 DOM/Document 相关的操作自然会失败。 This is one of the basic differences between running JavaScript in the browser and server-side.这是在浏览器和服务器端运行 JavaScript 的基本区别之一。 JQuery will only work in browser. JQuery 只能在浏览器中使用。 But your node server can generate HTML and send it to the browser, that's what ejs does and are called template engines.但是您的节点服务器可以生成 HTML 并将其发送到浏览器，这就是 ejs 所做的并且被称为模板引擎。

错误：jQuery需要一个window带证件。使用ejs和javascript创建刽子手web app

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-06 16:54:06

错误：jQuery需要一个window带证件。 使用ejs和javascript创建刽子手web app

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-06 16:54:06

错误：jQuery需要一个window带证件。使用ejs和javascript创建刽子手web app

解决方案1
0 已采纳 2020-05-06 16:54:06