Ошибка: jQuery требуется окно с документом. Использование e js и javascript для создания веб-приложения палача - PullRequest
Новая
       5

Ошибка: jQuery требуется окно с документом. Использование e js и javascript для создания веб-приложения палача

0 голосов
/ 05 мая 2020

Я хочу получить доступ к значению «угаданный» в файле js, чтобы удалить класс «lettercolor» из div, чтобы правильно угаданная буква отображалась в черном цвете по умолчанию. Я мог бы сделать это, если бы другой файл js мог содержать предполагаемое значение, но я также не знаю, как передать «предполагаемые» значения из app. js в другой файл js. Пожалуйста, предлагайте изменения или улучшения.

index.e js

<!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;
}

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;
}

1 Ответ

0 голосов
/ 06 мая 2020

NodeJS работает на вашем сервере, а не в браузере. Любые операции, связанные с DOM / Document, естественно, потерпят неудачу, поскольку вы пытаетесь манипулировать DOM, которым сервер узла не может управлять напрямую. Это одно из основных c различий между запуском JavaScript в браузере и на стороне сервера. JQuery будет работать только в браузере. Но ваш сервер узла может отображать HTML и отправлять его в браузер, что и делает e js, и это называется движками шаблонов.

...