I am creating a Bug tracking system as a project to learn Node.js. The problem I am encountering is that I want to change the table row(in the below screenshot) background color with respect to the value of the status(like for OPEN I want the color red, green for closed etc).

<table class="table">
    <thead>
        <tr>
            <th>Project</th>
            <th>Status</th>
            <th>Date Created</th>
            <th>Bug</th>
            <!--  -->
            <th>Description</th>
            <th>Date Solved</th>

        </tr>
    </thead>     
    <tbody>
        <% bugs.forEach(function(bugs){ %>
        <tr id ="color">
            <td><a style="text-decoration:none" href="/"><%= bugs.projectName%></a></td>
            <td><%= bugs.status %> 
                <% if (bugs.status === "OPEN") { %>
                <% document.getElementById("color").style.color = "green"; %>
                <% } %>                         
            </td>
            <td><%= bugs.dateCreated %></td>
            <td><a style="text-decoration:none; color : #000;" href="/bugs/<%= bugs._id %>"><%= bugs.title %></a></td>
            <td><a style="text-decoration:none; color : #000;" href="/bugs/<%= bugs._id %>"><%= (bugs.description).substr(0, 40) %></a></td>
            <td><%= bugs.dateSolved %></td>
        </tr>  
        <% }); %>
    </tbody>
</table>

The error produced :

ERROR

I am creating a Bug tracking system as a project to learn Node.js. The problem I am encountering is that I want to change the table row(in the below screenshot) background color with respect to the value of the status(like for OPEN I want the color red, green for closed etc).

<table class="table">
    <thead>
        <tr>
            <th>Project</th>
            <th>Status</th>
            <th>Date Created</th>
            <th>Bug</th>
            <!--  -->
            <th>Description</th>
            <th>Date Solved</th>

        </tr>
    </thead>     
    <tbody>
        <% bugs.forEach(function(bugs){ %>
        <tr id ="color">
            <td><a style="text-decoration:none" href="/"><%= bugs.projectName%></a></td>
            <td><%= bugs.status %> 
                <% if (bugs.status === "OPEN") { %>
                <% document.getElementById("color").style.color = "green"; %>
                <% } %>                         
            </td>
            <td><%= bugs.dateCreated %></td>
            <td><a style="text-decoration:none; color : #000;" href="/bugs/<%= bugs._id %>"><%= bugs.title %></a></td>
            <td><a style="text-decoration:none; color : #000;" href="/bugs/<%= bugs._id %>"><%= (bugs.description).substr(0, 40) %></a></td>
            <td><%= bugs.dateSolved %></td>
        </tr>  
        <% }); %>
    </tbody>
</table>

The error produced :

ERROR

• javascript
• node.js
• ejs

• 1 You'll want to use style.backgroundColor instead of style.color if you're wanting to change the background color rather than the text color. – Christopher Bradshaw Commented Feb 4, 2019 at 17:41

2 Answers 2

Your <tr> should not have an id since it likely repeats several times on your page. I believe a class would be more appropriate here. More info on the differences between ids and classes https://css-tricks./the-difference-between-id-and-class/.

I think something like this added to your <tr> might do the trick.

<tr style="<%= bugs.status === 'OPEN' ? 'color: green' : '' %>">

One thing to keep in mind; most people look down on in-line styles like my example. An better option would be to make a style class that had all the styling you want for your "open" rows and applying that class using a similar ternary like I showed above.

// somewhere in your stylesheet
.open-bug { color: green; }
<tr class="<%= bugs.status === 'OPEN' ? 'open-bug' : '' %>">

EJS is rendered on the server, not the browser, so EJS has no idea what document is since that's something that's only defined in the browser.

You can solve your issue by using inline styles similar to how Dan did in his answer above.