Within my .ejs file, I am passing an array called todolist containing objects of type todo. These objects have keys named: Action / Date / Priority
I want to display the values of these keys, with the priority text appearing in red if the priority is >3, orange if the priority is ==3, and green if the priority is <=2. The code snippet below shows how this is implemented.
Snippet from my code:
<ul id="list1">
<% todolist.forEach(function(todo, index) { %>
<li><a href="/todo/delete/<%= index %>">✘</a>
<%= todo.action %> <%=todo.date%> (Priority: <div id="prio<%index%>"><%=todo.priority%>/5)</div>
</li>
<% }); %>
</ul>
<script>
$('#list1 div').each(function() {
if ($(this).text() <= 2) $(this).css('color', 'green');
else if ($(this).text() == 3 ) $(this).css('color', 'orange');
else $(this).css('color', 'red');
console.log("I'm in");
});
</script>
I suspect that my function may be conflicting with an external CSS stylesheet. Additionally, I am not seeing the "I'm in" message in my console, and I'm unsure why this is happening. Any assistance would be greatly appreciated. Thank you!