I am building an application using Mongo, Express, Node.js. I am trying to embed some JQuery inside an .ejs file so that when the user upvotes a post, the score for that post is incremented (or decremented). I read this post how to use jQuery installed with npm in Express app?. I have included the <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> in my header. But when I execute my code I get an error that '$ is not defined'. Here is the relevant portion of the code:
<div class="carousel-inner">
<!-- Carousel item represents each slide -->
<div class="carousel-item active">
<div class="container">
<div class="row align-items-center">
<h2>
Use Arrow Buttons to Scroll DOWN and UP
</h2>
</div>
</div>
</div>
<%
var max = questions.length
for (var i = 0; i < max; i++) {
%>
<div class="carousel-item" style="text-align: justify" >
<div class="row">
<h2><%= questions[i].title %></h2>
<p><%= questions[i].body %></p>
</div>
<div class="row" style="width: 100%; height: 90px; white-space: nowrap; overflow-x: auto;">
<p style = "display: inline-block; width: 70%; height: 100%;"><strong>Posted by: </strong><%= questions[i].userid.username %> on <%= questions[i].datePosted.toDateString() %> </p>
<button id="submitButton" style = "display: inline-block; width: 30%; height: 50%; border-radius: 5px; background-color:darkcyan" type="submit">View Responses</button>
</div>
<div class="row" style="width: 100%; height: 90px; white-space: nowrap; overflow-x: auto;">
<button style = "display: inline-block; width: 25%; height: 50%; border-radius: 5px" id="minus">-</button>
<button style = "display: inline-block; width: 25%; height: 50%; border-radius: 5px" is="plus">+</button>
<% relevance = questions[i].upvotes %>
<p style = "display: inline-block; width: 50%; height: 100%;" id = "score"><strong> Score: </strong> <%= relevance %></p>
</div>
<%
var myBoolean = 0;
$("#plus").click(function(){
if (myBoolean == 0) {
relevance++;
myBoolean = 1;
}
$("#score").text(relevance);
});
$("#minus").click(function(){
if (myBoolean == 0) {
relevance--;
myBoolean = 1;
}
$("#score").text(relevance);
});
%>
</div>
<% } %>
</div>
I also want to update my mongoDB database with the updated score using Mongoose, but right now I am just trying to get the basic increment / decrement to work. I tested all the code OTHER THAN the snippet that starts with <% var myBoolean ... %>. It all works. Its just when I try to use the JQuery that this does not work. Can someone point me in the right direction?
