Attempting to hide anchor tags for "register" and "login" while making the anchor tag for "logout" visible after signing in

After signing in, I want the register and login anchor tags to disappear and the logout anchor tag to appear. However, the login and register links stay visible on the page even after I sign in.

<div class="navbar-nav ms-auto">
      <% if (!currentUser) { %>
        <a class="nav-link" href="/login">Login</a>
        <a class="nav-link" href="/register">Register</a>
      <% } else { %>
      <a class="nav-link" href="/logout">Logout</a>
          <% } %>

currentUser is accessible through a middleware in express, where it is assigned to req.user.

javascriptexpressejsbootstrap-5

Answer №1

To hide an element using CSS, you can utilize the property display: none. Additionally, you can dynamically apply a CSS class using JavaScript.

const loginEl = document.getElementById("login-anchor");

// Conditional class name change
if(condition) {
  loginEl.classList.remove("show-login");
  loginEl.classList.add("hide-login");
}
.hide-login {
  display: none;
}
<a class="show-login" id="login-anchor" href="/login">Login</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Summing up various results from promises [Protractor]

On my webpage, I have set up two input text boxes and a label. My aim is to extract the numbers from these elements, sum up the numbers in the text boxes, and then compare the total with the number in the label. Does anyone know how I can achieve this? He ...

javascriptseleniumprotractor

Is there a way to retrieve the central anchor point position (x, y) of the user's selection in relation to the document or window?

Is there a way to retrieve the center anchor point position (x, y) of the user's selection relative to the document or window? I have tried using window.getSelection() to get selected nodes, but I am unsure how to obtain their position: See an examp ...

javascripthtmldomfrontend

When sending an AJAX request to a URL, can I verify in the PHP page whether it is a request or if the page has been accessed?

In order to enhance security measures, I need to prevent users from accessing or interacting with the php pages that will be utilized for ajax functionality. Is there a method available to determine if a page has been accessed through an ajax request or b ...

phpjavascriptjqueryajax

Troubleshooting a Form Validation Issue with React's useState Hook

I am currently working on form validation for a project. The form includes two essential elements: a textbox for messages and a textbox for recipients. These elements are controlled by state.message (a string) and state.recipients (an array). The state var ...

javascriptreactjsformsvalidation

Using Typescript to establish a connection between ngModel and an object's property

Let's talk about how we can dynamically bind an input to an undefined property in an object. For example, we have an object named user: let user = {}; How can we bind an input to a property that doesn't exist yet? Like this: <input [(ngMode ...

javascriptangulartypescriptundefinedngmodel

Retrieve the stylesheet based on the presence of a specific class

Is there a way to dynamically add a CSS stylesheet based on the presence of a specific class on a page? For example, instead of checking the time and loading different stylesheets, I want to load different stylesheets depending on the class present in the ...

javascriptcssfunctionif-statement

An issue occurred while trying to establish a WebSocket connection: the 'Connection' header is missing from the handshake

Brand new to the world of Node and Socket.io, I recently launched my first chat application on spaiglas.com. Despite encountering a straightforward error in the developer console, the app is up and running smoothly... WebSocket connection to 'ws://ex ...

node.jssocketsexpresswebsocketsocket.io

The sequencing of AJAX calls on the server side may not necessarily match the order in which they were initiated on the client side

I am working on an ASP.NET MVC application that includes a JavaScript function within a view. Here is the code snippet: function OnAmountChanged(s, fieldName, keyValue, url) { console.log("Get Number: " + s.GetNumber()); console.log(" "); ...

javascriptajaxasp.net-mvc

Creating dynamic routes with Map in ReactJS: a beginner's guide

In the sample code below, I have added a column to the children property that includes my component. I am attempting to pass this to my Route element using map in order to dynamically populate the React Route. navLink.js export const navLinks = [ { ...

javascriptreactjsreact-bootstrap

Clearing Input Values in Text Boxes, Dropdowns, and Checkboxes in ASP.NET MVC

Currently, I am working with Asp.net MVC 4 using C#. On one of my pages, I have a Text box, Drop down, and checkbox all together as search filters. There is also a "Clear" button to reset the values. When this button is clicked, I want the textbox value to ...

javascriptc#jqueryasp.net-mvc-4

When embedding HTML inside an Angular 2 component, it does not render properly

Currently, I am utilizing a service to dynamically alter the content within my header based on the specific page being visited. However, I have encountered an issue where any HTML code placed within my component does not render in the browser as expected ( ...

javascriptangulartypescript

When the state changes in React, the useSelector hook does not provide real-time updates

Currently, I am in the process of implementing a search feature using React and Redux Thunk. The main requirement for this search functionality is to fetch data from an API by calling a thunk action and updating the state accordingly for display on the UI. ...

javascriptreactjsreact-hooksthunk

Dealing with errors such as "Failed to load chunk" can be resolved by implementing lazy-loading and code-splitting techniques

Our team is currently working on a Vue.js application using Vue CLI 3, Vue Router, and Webpack. The routes are lazy-loaded and the chunk file names include a hash for cache busting purposes. So far, everything has been running smoothly. However, we encoun ...

javascriptvue.jswebpacklazy-loadingcode-splitting

Guide to calculating the total count of embedded references in a Mongoose schema

I am currently working with node.js express and mongoose Here is the schema that I am using: var playerSchema = mongoose.Schema({ id: Number, name: String, scores: [ { type: mongoose.Schema.Types.ObjectId, ref: ...

node.jsexpressmongoose

Emphasize any word starting with an @ symbol to highlight its importance

My goal is to enhance the appearance of words that begin with an "@" symbol by making them bold. For example, transforming the sentence: '@xyzharris has a cat @zynPeter' into: '@xyzHarris has a cat @zynPeter' ...

javascriptcssregex

Distinguishing between creating controllers in AngularJS

I am a beginner in the world of AngularJS and I have come across two different examples when it comes to creating a controller. However, the one that is more commonly used doesn't seem to be working for me. The problem with the first example is that ...

javascriptangularjs

transferring function from server to the client module named Next 13

After referencing the documentation for the app directory in Next.js, it is recommended to fetch data inside Server Components whenever feasible. Server Components always carry out data fetching on the server. This advice is particularly helpful for me as ...

javascriptreactjsnext.jsreact-props

The scenario of two users simultaneously gaining control access in socket.io creating a race condition

There is a need to ensure that only one user at a time is notified for an available room. I am implementing a solution to prevent multiple users from being notified simultaneously for the same room. socket.on('Check', function (room) { io.in(r ...

javascriptnode.jssocket.iorace-condition

Repairing a broken link to the search engine results page (SERP) of an instant JSON search script

I have developed a search script inspired by Google Instant search, which shows relevant results as the user types. The script is written in JSON and utilizes JavaScript to create a URL for the result based on user input. However, there seems to be an issu ...

javascriptjqueryhtmljson

Storing information from a table into LocalStorage

$('.new_customer').click(function () { var table = $("table"); var number = table.find('tr').length; table.append('<tr id="' + number + '"><td><input type="button" class="btn btn-success btn-xs" ...

javascriptjqueryhtmllocal-storage