What could be the reason for the unexpected outcome when checking if display is equal to "none"?

I have a JavaScript function called "display()". I want to hide my navigation menu on click, but it is not working properly - it just blinks.

I am looking for a solution that uses only JavaScript and does not involve querySelector.

function display() {
  var x = document.getElementById("nav-content");
  x.style.display = "none";
}
<header>
  <div class="LiaWrapper clearfix">
    <h1 id="logo">logo</h1>
    <a href="" id="drop-down-icon" onclick="display()"><i class="fa fa-bars" aria-hidden="true"></i>
            </a>
    <nav id="nav-content">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">services</a></li>
        <li><a href="">clients</a></li>
        <li><a href="">about us</a></li>
        <li><a href="">contact</a></li>
      </ul>
    </nav>
  </div>
</header>

My goal is to successfully hide the navigation menu on click without any flickering issues.

javascripthtmlcss

Answer №1

The issue is occurring because you have utilized onclick on an <a> element with an empty string as the href attribute.

Consider removing the href attribute from the anchor tag to resolve this problem.

<a id="drop-down-icon" onclick="display()"><i class="fa fa-bars" aria-hidden="true"></
i>

View the code snippet in action at - https://jsfiddle.net/1jr0to9s/

Answer №2

Start by eliminating the href attribute, as the anchor tag is typically utilized for redirecting to a specific URL. It is recommended to use 

<input type="button" value="Click"/>

Next, consider using font awesome icons instead of the button text. However, if you still prefer to utilize an anchor tag, remove the href attribute or replace it with

javascript:void(0)

Give it a try now

Answer №3

Hide an element with jQuery: $("#element_id").css("display", "none");

Hide an element with vanilla JavaScript: document.getElementById("example").style.display = "none";

Remember to use this technique when needed.

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

Leverage the generic types of an extended interface to simplify the creation of a shorthand type

Attempting to streamline my action shorthand that interacts with AsyncActionCreators. A function has been crafted to accept a React dispatch: Dispatch<T> parameter: const fetchProfileAction = actionCreator.async<void, Profile, any>('FETC ...

javascripttypescriptgenericstypescript-typings

Prevent the query from being executed by halting the AJAX call

Within my web application, I have a specific button that triggers an AJAX call upon being clicked. On the server side, I need to run a query against a database. I am concerned about the execution time of these queries and worry that users may be impatient ...

javascriptc#angularjsajax

What are the steps to effectively utilize data retrieved from readFragment using Apollo?

Once a user logs in, the system returns a jwt token and a user object containing the id and firstName, which are then stored in cache (refer to the image link provided below). https://i.stack.imgur.com/oSXZ5.png I aim to retrieve the user information fro ...

javascriptreactjsapolloreact-apolloapollo-client

Is there a CSS equivalent of column-gap for rows?

After following this guide, I attempted to recreate the photo grid with some spacing between the images. Changing the column-gap property to 3px did add horizontal space, but is there a way to include vertical gaps as well? Any suggestions or solutions wou ...

htmlcss

Tips for dynamically displaying a Material UI dialog with smooth fade effects

I am currently developing a basic application that lists users. Whenever I click on a user, I want to display a dialog box with specific information about that user. I have attempted to achieve this using Material UI's Dialog component in different wa ...

javascriptreactjsdialogmaterial-ui

"Revamp your site with Vue and API for dynamic background

I'm faced with an issue where I am attempting to modify the background of a joke fetched from an API, but for some reason, the background is not changing and I can't seem to identify why. The main problem lies in my inability to change the proper ...

javascripthtmlvue.js

A guide to eliminating TextRow and inserting a string into JSON using NodeJs

To remove TextRow and add the string true to JSON in NodeJs, I have included the following code: NodeJs Code: function groupBy(objectArray, property) { return objectArray.reduce(function (acc, obj) { let key = obj[property] if (!acc[key]) { ...

javascriptnode.jsarraysjson

Display the final row by hovering over the line

<table> <thead> <tr> <th>First</th> <th>Second</th> <th></th> </tr> </thead> <tbody> <tr> <td>Data1</td> <td>Dat ...

htmlcss

Customizing the styling of a TextField component in ReactJS using material-ui

I am currently working with Reactjs and material-ui. I am looking to apply some custom styles to a TextField using css. Specifically, I would like to change the color of the TextField underline and label when the input is clicked. Although I know it can b ...

javascriptcssreactjsmaterial-ui

Utilizing Javascript for a Stopwatch/Countdown in the Format: 00:00:00

I am currently working with this block of code: function startStopwatch() { vm.lastTickTime = new Date(); $interval.cancel(vm.timerPromise); vm.timerPromise = $interval(function() { var tickTime = new Date(); ...

javascriptangularjsmomentjsangular-moment

By setting up a keydown event listener, I am unable to inspect HTML elements by using the F-12 key shortcut in Chrome

Recently, I encountered an issue where adding a keydown event listener in my JavaScript code prevented F-12 from working properly. window.addEventListener("keydown", function (event) { if (event.defaultPrevented){ retu ...

javascripthtmlgoogle-chromekeyboardaddeventlistener

Ensuring the Selection with jQuery

I've successfully implemented jQuery validation on a text field, but when I try to apply it to a radio button, it doesn't seem to work. I'm not sure what I'm doing wrong. Here is my HTML and jQuery code: <input type="text" placehol ...

jqueryhtml

"Utilizing Node.js and Express to return JSONP data based on

For some reason, my Express application is giving me a strange result when using res.jsonp. It looks like this: /**/ typeof jsonp1406719695757 === 'function' && jsonp1406719695757({"published":true,"can_add_to_cart":true,"updated_at":"20 ...

javascriptnode.jsexpressjsonp

tips for concealing a row in the mui data grid

I am working on a data grid using MUI and I have a specific requirement to hide certain rows based on a condition in one of the columns. The issue is that while there are props available for hiding columns, such as hide there doesn't seem to be an eq ...

javascriptreactjstypescriptmaterial-ui

The iframe came to a halt as soon as it was no

I am currently developing a live video website that utilizes third-party tools to play the videos. To simplify things, I have embedded all the components required for live video into a single HTML page. Here is how it looks: <iframe data-v-140cfad2= ...

javascripthtmldomiframevue.js

Creating a custom comparison method between two select dropdowns using the jQuery Validation plugin

In my HTML code, I have two select elements: <label for="h_slat_type">Horizontal Slat Type</label> <select name="h_slat_type" id="h_slat_type"> <option disabled="disabled" selected>Select</option> ...

javascriptjqueryjquery-validate

"Fill the designated area on the webpage with data retrieved from an external script

In my current project, I am utilizing Angular and JQuery to enhance re-usability by setting the header and footer as partials. However, I encountered an issue where I needed certain javascript functions to be executed within the footer upon loading - a tas ...

javascriptjqueryangularjs

Creating a dynamic user interface in Angular 6 that successfully tracks changes without reliance on the parent

As I delve into the world of Angular, I am faced with a challenge in creating a reusable component that will be bundled into an npm module. The issue lies in the UI change detection aspect. In order for the component to function properly, the application ...

javascriptangulartypescriptangular-changedetection

Managing user logins across different sessions using passport.js, mysql database, and express-session

Currently, my app utilizes Passport.js for user authentication with Facebook, which is functioning properly. The issue arises when my node.js server is restarted and the users are automatically logged out. It appears that using express-sessions would be a ...

javascriptmysqlnode.jsexpresspassport.js

The bottom of the page refuses to remain anchored

I've exhausted all possible solutions and my footer just refuses to stay at the bottom of the page. Working with Opencart has made it challenging for me to pinpoint the root cause, leaving me utterly perplexed. The issue persists on pages with minim ...

phpcssopencartfootersticky