I am in the process of creating a website quickly using e.js & Express.
However, I am encountering some problems when trying to use an if-else statement within e.js tags.
The if statement works fine, but as soon as I add an else statement, things start to go wrong.
(Just so you know, this code is part of a partial)
Full file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps:wght@700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="images/CaffLogWhite.png">
</head>
<header>
<nav>
<div class="nav-wrapper">
<a href="/">
<img class="nav-logo" src="images/CaffLogBlack.png" alt="CaffeinatedLogo" style="width:95px;height:95px;">
<t style="font-size: 36px">
<b>Caffeinated</b>
</t>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="/ToS">Terms of Service</a></li>
<li><a href="/faq">FAQ</a></li>
<% if (user) { %>
<a href="/auth">
<button class="btn">
<span>Login with Discord</span>
</button>
</a>
<% } %>
<% else { %>
<% } %>
</ul>
</div>
<hr>
</nav>
</header>
<style>
nav t {
float: left;
position: relative;
color: #323232;
font-family: 'Quicksand', sans-serif;
margin-top: 20px;
font-family: 'Oleo Script Swash Caps', cursive;
}
nav {
position: fixed;
width: 100%;
text-decoration: none;
display: inline-block;
font-size: 28px;
}
nav ul {
display: table;
margin: 0 auto;
width: 60%;
text-decoration: none;
list-style-type: none;
color: #323232;
overflow: auto;
height: 20px;
}
nav ul li a {
text-decoration: none;
font-family: 'Quicksand', sans-serif;
}
.nav-logo {
float: left;
}
nav ul li {
color: #323232;
display: inline-block;
margin-right: 40px;
margin-top: 28px;
list-style-type: none;
font-size: 24px;
}
nav ul button {
display: inline-block;
float: right;
background: #7289DA;
color: white;
text-decoration: none;
list-style-type: none;
font-family: 'Quicksand', sans-serif;
font-size: 18px;
width:103px;
height:57px;
border-radius: 8px;
margin-right: -142px;
}
nav ul button:hover {
background: #3857c7;
}
</style>
</html>
The error message that appears is:
E:\dev\CaffeinatedWebsite\views\profile.ejs:10 8| </title> 9| <link rel='stylesheet' href='/stylesheets/style.css' /> >> 10| <%- include('./partials/header.ejs', { user } ) %> 11| </head> 12| 13| <div class="welcome-message-caff"> Unexpected token 'else' in E:\dev\CaffeinatedWebsite\views\partials\header.ejs while compiling ejs If the above error is not helpful, you may want to try EJS-Lint: https://github.com/RyanZim/EJS-Lint Or, if you meant to create an async function, pass async: true as an option.
If anyone has any insights on how to resolve this issue, I would greatly appreciate it!
Thank you in advance.