2

I am currently trying to develop a partial templating file for a navbar using ejs, however I am struggling to add additional classes to an element which already has classes added to it.

I have tried 2 methods of adding the additional class, this is the first one:

<li class='navbar-item'<% if (pageTitle === 'Home') { %> class="active" <% } %>> <a href="/home">Home</a></li>

However this did not work so I decided to try embedding the EJS inside the class attribute, as follows

<li class="nav-item <% if (pageTitle === 'Home') { %> active <% } %>">

This also did not work, I have ensured that pageTitle is being served correctly as it is used elsewhere within the webpage and works fine.

I am not sure as to what the next stage is, I have considered using an additional JS file but that seems counter productive as I already have the ability to embed the JS inside the HTML.

Any help is appreciated, thanks in advance.

Tom Meeson
  • 37
  • 5

3 Answers3

6

You can make your life easier with a Conditional operator like this

<li class="<%= pageTitle == 'Home' ? 'navbar-item active' : 'navbar-item' %>"
dimitris tseggenes
  • 3,031
  • 2
  • 16
  • 23
0

I think the issue might be in the comparison. As a first check, in your second version try both '==' and also '!='. If '!=' gives you the 'current' class, you know that the logic in general is fine. For more details, and an even better approach on how to compare Strings here, please have a look here: How could I compare two string in Jsp?

Erik Reder
  • 303
  • 3
  • 14
  • This was an interesting read, however the comparison here should make almost no difference. I had ensured that the value was correct that was being fed in. Thankyou for this either way. – Tom Meeson Feb 12 '19 at 10:32
  • I'm not talking about the value being correct, I mean that the comparison (operator) itself might be wrong. Hence I suggest to use the negated operator, to see if you get the right out come then. Also note '===' vs '==' and '==' vs .equal()' as in the cited resource. Just give it a try. – Erik Reder Feb 12 '19 at 12:19
  • I did indeed look at the comparison operator, however in this instance it makes no difference as I am supplying an key value object pair via the express route, the value is indeed a string as it is static rather than dynamic. – Tom Meeson Feb 12 '19 at 12:37
  • Reading your own solution above, can you elaborate why it solved your problem? As I see it, you're now generating 'navbar-item active' instead of 'nav-item current'. Seems a bit like the issue was in the naming or in the css, rather than in the code logic... – Erik Reder Feb 12 '19 at 13:30
  • Admittedly there was an error in the classes I added, however this issue made no difference as I was using the DevTools on chrome to check which classes would be added, there was still a persistent issue with the code not successfully adding the classes into the class attribute... I have now updated the initial post as to work more suitably. – Tom Meeson Feb 12 '19 at 14:52
0

Using an if else statement, I have managed to develop an alternative solution to my own question. I came to this conclusion after discussing with a classmate who stated a relatively easy solution to this.

<li <% if (pageTitle == 'Home') { %> class='navbar-item active'<% } else { %> class = 'navbar-item' <% } %>>

This is not exactly as I wished for it to work but works effectively none the less.

Tom Meeson
  • 37
  • 5