I'm trying to run a jQuery code to change the h1 color based on whether it's a weekday or-CodePudding

I'm trying to run a jQuery code to change the h1 color based on whether it's a weekday or a weekend The error I keep getting is 'ReferenceError: $ is not defined', can someone please help me? app.js is located in parentfolder/app.js while lists.ejs is located in parentfolder/views/lists.ejs . document.queryselector is not working either

app.js

const express = require("express");
const bodyPareser = require("body-parser");

const app = express();

app.use(bodyPareser.urlencoded({extended : true}));

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

app.get("/", function(req, res) {
    var date = new Date();
    var currentDay = date.getDay();

    var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

    if (currentDay === 0 || currentDay === 6) { 
        $(h1).style.color = "red";
    } else {
        $(h1).style.color = "blue";
    }
    res.render("lists", {today : days[currentDay]});

    res.sendFile(__dirname   "/views/lists.ejs");
});

app.listen("3000", function() {
    console.log("Server started in 3000");
});

lists.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Today is <%= today %></h1>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

CodePudding user response：

when you are using Node you are running server-side( to use a library you need to require it ), also you cannot use client side selectors because they don't exist

inside app.js

app.get("/", function(req, res, next) {
  const date = new Date();
  const currentDay = date.getDay();
    
  const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  let day_color
  if (currentDay === 0 || currentDay === 6) { 
     day_color = "red";
  } else {
     day_color = "blue";
   }
   res.render("lists", {today : days[currentDay],color:day_color},
     (err,html) => {
       if(err){
        console.log(err)
        return next(err)
       }
       res.send(html)
     })

});

inside list.ejs

<h1 <%= `style=color:${color}`%> >Today is <%= today %></h1>