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

Fetching data dynamically from the server using AJAX for a interactive chart with Flot

After looking at the Flot reference, they mentioned, The plot function can also be used as a jQuery chainable property. Is it possible to configure the Flot chart in this way? var pid = ''; var kid = ''; var chartasset; $(documen ...

javascriptjqueryajaxcodeigniterflot

Constantly loading image with Meteor HTTP request

Within my Meteor application, I am attempting to dynamically load a random image from an API which returns JSON data structured like this: { "id":2026 "url": "https:// ... " , "large_url":null, "source_id":609, "copyright":"CC0", "site":"unsplash" } ...

javascriptjsonimagemeteor

Switch website address without redirecting via JavaScript

I am seeking information on how to update the URL without a full page reload, similar to the functionality seen on this website . When clicking on tabs, the URL changes seamlessly without refreshing the entire page. While some sources suggest that this m ...

javascriptjqueryajaxhttp-redirect

Accessing a file located in a specific directory using the node fs module

Currently, I am attempting to access a file from my local system using the 'fs' module in node.js. However, I have encountered an issue where the 'fs' module does not seem to function properly when an absolute path is provided. Here is ...

javascriptnode.jsnpmelectronfs

Does anyone have a solution for resetting the ID numbers in a flatlist after removing an item from it?

As the title suggests, I am facing an issue with the following scenario: { id: '1', name: 'one' }, { id: '2', name: 'two' }, { id: '3', name: 'three' }, { id: '4', name: &apo ...

javascriptarraysreact-nativereact-native-flatlistreact-flatlist

Bootstrap grid not maintaining consistent column widths

Currently, I am in the process of setting up a responsive bootstrap grid for the projects section on my portfolio page. My goal is to create a 3x3 grid that adjusts seamlessly for mobile devices and breaks down into a 2-column grid and eventually a 1x6 gri ...

htmlcsstwitter-bootstrap

Guide on parsing a JavaScript file and converting the default export module to JSON with Node.js

What I'm trying to accomplish in my Node.js project is reading a sample.js file with ES Module syntax and extracting the default export from it. sample.js import foo from "foo"; const bar = [ { name: "Homer", }, { n ...

javascriptnode.jsjson

Utilizing AngularJS: Executing directives manually

As a newcomer to AngularJS, I am facing a challenge that requires creating a 3-step workflow: The initial step involves calling a web service that provides a list of strings like ["apple", "banana", "orange"]. Upon receiving this response, I must encap ...

javascriptangularjs

OceanWP Theme with a Fixed Navigation Bar

Currently utilizing the oceanwp theme, I'm aiming to create a topbar that vanishes while scrolling and have the menu smoothly transition to the topbar location with some opacity. I attempted the following code snippet: #site-header { position: fixe ...

csswordpress

Retrieving the input[text] value in TypeScript before trimming any special characters

One of the tasks I am working on involves a form where users can input text that may contain special characters such as \n, \t, and so on. My objective is to replace these special characters and then update the value of the input field accordingl ...

javascriptjquerytypescript

My JavaScript code is being executed before Chrome Auto-fill

I have successfully created form input elements in Chrome that display a floating label when focused. However, I am encountering an issue when the browser autofills the username and password fields with yellow prefilled text. The JavaScript for the float ...

javascriptjqueryhtmlcssgoogle-chrome

Discovering the smallest, largest, and average values across all properties in an array of objects

Given an array of objects with varying values, the task is to determine the minimum, maximum, and average of the properties in that array. For example, consider the following array: const array = [{ "a": "-0.06", "b": "0.25", "c": "-0.96", ...

javascriptnode.jsreactjsarraysjson

I'm puzzled by why my newly purchased website domain occasionally redirects me to the outdated webpage

My website was previously hosted with n*agahoster but we decided to switch to a government server and change the domain from example.com to example.gov.xx. The transition was smooth, as someone managed the server and I provided backup files (public_html an ...

phphtmlwebserverhosting

Dropzone.js only allows one audio file and one image thumbnail file to be uploaded simultaneously

Is there a way to limit the types of files that can be uploaded through Dropzone.js? Specifically, I want to restrict users to uploading only one image and one audio file. ...

javascriptajaxdropzone.js

Generating random values from an array in PHP without the need to refresh the page

Lately, I've been delving into the world of PHP for the first time in a project. However, I've encountered a problem that has me stumped – despite scouring various questions on Stack Overflow. My issue involves randomizing values from an array ...

javascriptphpjqueryhtmlajax

What is the correct way to implement Axios interceptor in TypeScript?

I have implemented an axios interceptor: instance.interceptors.response.use(async (response) => { return response.data; }, (err) => { return Promise.reject(err); }); This interceptor retrieves the data property from the response. The re ...

javascripttypescripttypesaxiosinterceptor

"Exploring the process of looping through an array of JavaScript objects and showcasing a List Selector on the Google Assistant app with the help of

After extensively researching all the available documentation at https://developers.google.com/actions/assistant/responses In the documentation for the "List Selector," all the examples provided involve static and predetermined data. In a real-world scen ...

javascriptandroidarraysnode.jsactions-on-google

Reorganize external dependencies in the wwwroot directory using gulp

In my development setup using VS 2015, ASP.net vnext, Angular 2, Typescript, and gulp.js, I have successfully automated the process of moving my scripts/**/*.ts files to the wwwroot/app folder. Now, I am looking to extend this automation to include my libr ...

javascriptbuildnpmgulpasp.net-core

First time blur update unique to each user

By using ng-model-options="{ updateOn: 'blur' }", I can delay model updating until the user clicks out of an input field. This helps prevent constantly changing validation states while initially entering data. However, if a user revisits a field ...

javascriptangularjs

Opt for buttons for color selection instead of a checkbox toggle

I attempted different approaches to replace the existing checkbox with a button but encountered difficulty. Using the onClick method also proved unsuccessful. VIEW DEMO HERE: https://jsfiddle.net/yxez4a2u/ HTML: <div class="form-check form-switch ...

javascripttwitter-bootstrapbootstrap-5