錯誤：jQuery需要一個window帶證件。使用ejs和javascript創建劊子手web app

Question

我想訪問 js 文件中的值“guessed”以從 div 中刪除 class“lettercolor”，以便正確猜測的字母以默認黑色顯示。 如果另一個 js 文件可以保存猜測值，我可以做到這一點，但我也不知道如何將“猜測”值從 app.js 傳遞到另一個 js 文件。 請提出更改或改進建議。

索引.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>

應用程序.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

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 在您的服務器上運行，而不是在瀏覽器上運行。 當您試圖操作節點服務器無法直接控制的 DOM 時，任何與 DOM/Document 相關的操作自然會失敗。 這是在瀏覽器和服務器端運行 JavaScript 的基本區別之一。 JQuery 只能在瀏覽器中使用。 但是您的節點服務器可以生成 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