Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
23 days ago

The formatting of the EJS Template page list is not functioning properly.

I am working on a website that logs different call urgencies, such as Emergency, Urgent, and ASAP. To display the calls on the web page, I'm using an EJS template and a for loop. To style the background of the template based on call urgency, I attached a browser-side JavaScript file to the EJS template that changes the background color of the template. However, the other template body colors remain the default color, and only the first template's background color changes. In the calls.ejs file, if there are no calls found, I display "No calls found!" Otherwise, I display the calls using an ordered list with the call details within list items. In the call-item.js, I extract the call urgency and style the call item's background differently based on urgency using CSS classes. The code snippets displayed in the paragraph remain unchanged.
Answers(2)
avatar
Vogi
22 days ago
Verified Answer
To change the background color of an EJS template based on call urgency, you can use CSS classes. In your call-item.js file, you can extract the call urgency and style the call item's background differently based on urgency using CSS classes. Here's an example: 
.emergency {
  background-color: red;
}

.urgent {
  background-color: orange;
}

.asap {
  background-color: yellow;
}
Then in your EJS template file, you can use the CSS class that corresponds to the call urgency to style the background color of the template. Here's an example: 
<% for (var i = 0; i < calls.length; i++) { %>
  <li class="<%= calls[i].urgency %>">
    <%= calls[i].details %>
  </li>
<% } %>
This will apply the CSS class that corresponds to the call urgency to each list item based on the urgency value. You can also use CSS selectors to style other parts of the template based on the CSS class applied to the list item. I hope this helps! Let me know if you have any other questions.

Sources

Styling of list of EJS Template pages not workingset background image with ejs template - Stack Overflowag-grid : How to set custom background color in column header?
avatar
Tolerim
23 days ago
The issue with your JavaScript code is that you are using document.querySelector('#urgency') to select the element with id "urgency". querySelector only selects the first occurrence of the element. Since id values should be unique on a page, only one element on the page has the id "urgency", so the first one is selected every time. This is why only the first call item's background color is being changed. To fix this, you can loop through all the elements with class "post-item" using document.querySelectorAll('.post-item') instead of using document.querySelector to get the first element with id "urgency". Then, for each element, use querySelector to get the element with class "post-item-author" and "urgency", get the innerHTML of the element with class "urgency", and set the class based on the urgency value, as you are doing now. Here's the updated code for call-item.js: 
const posts = document.querySelectorAll('.post-item');
posts.forEach((post) => {
  const urgencyEl = post.querySelector('#urgency');
  const urgency = urgencyEl.innerHTML;
  post.className = 'post-item';
  if (urgency === 'Emergency') {
    post.classList.add('emergency');
  } else if (urgency === 'Urgent') {
    post.classList.add('urgent');
  } else if (urgency === 'ASAP') {
    post.classList.add('asap');
  }
});
This will loop through all the elements with class "post-item", get the urgency value for each call, and set the appropriate class on the parent element based on the urgency value. This should give you the desired result of every call's background color being changed based on the urgency value.
;