Error : jQuery requires a window with a document. Using ejs and javascript to create a hangman 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. 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. Please do suggest changes or improvements.
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;
}
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 answers
solution1
0 ACCPTED 2020-05-06 16:54:06
NodeJS runs on your server and not on the browser. 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. This is one of the basic differences between running JavaScript in the browser and server-side. JQuery will only work in browser. But your node server can generate HTML and send it to the browser, that's what ejs does and are called template engines.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.