I am unable to comprehend why the function classList.remove is not functioning as expected

Question

I am unable to comprehend why the function classList.remove is not functioning as expected

My JavaScript function seems to be malfunctioning. Whenever I remove the "d-none" class from an element, it briefly appears for about a second and then disappears again.

Here is the function responsible for toggling the visibility of the element:

function toggleElementVisibility() {
  document.getElementById("form-element").classList.remove("d-none");
}

The following link triggers the function:

<a href="" class="btn btn-primary" id="toggle_visibility_button" onclick="toggleElementVisibility()">
  TOGGLE VISIBILITY
</a>

This is the specific element that I want to show/hide:

<div class="d-none" id="form-element">
  <p>Content inside the form element...</p>
</div>

I attempted to halt the script upon displaying the element, but it appears that the page reloads automatically.

javascript html css bootstrap-4

Answer 1

Answer №1

As noted by the comments, it is recommended to attach a click event listener to an <a> tag instead of using the onclick attribute. By doing this, you gain access to the click Event itself and can prevent the default browser action for an <a> tag, which is navigating to another page. This was the primary issue in your code.

var purchaseCredits = document.getElementById("purchase_credits");
var paymentForm = document.getElementById("payment-form");

purchaseCredits.addEventListener("click", function(event){
  event.preventDefault();
  paymentForm.classList.remove("d-none");
})

.d-none{display:none;}

<a href="#" id="purchase_credits">
  PURCHASE CREDITS
</a>

<div id="payment-form" class="d-none">
hidden content
</div>

Answer 2

As noted by the comments, it is recommended to attach a click event listener to an <a> tag instead of using the onclick attribute. By doing this, you gain access to the click Event itself and can prevent the default browser action for an <a> tag, which is navigating to another page. This was the primary issue in your code.

var purchaseCredits = document.getElementById("purchase_credits");
var paymentForm = document.getElementById("payment-form");

purchaseCredits.addEventListener("click", function(event){
  event.preventDefault();
  paymentForm.classList.remove("d-none");
})

.d-none{display:none;}

<a href="#" id="purchase_credits">
  PURCHASE CREDITS
</a>

<div id="payment-form" class="d-none">
hidden content
</div>

I am unable to comprehend why the function classList.remove is not functioning as expected

Answer №1

Similar questions

What steps should I take to create code that can generate a JWT token for user authentication and authorization?

Trigger CSS3 animation only once upon the page loading

Issue with DOM: inability to detect value changes in vanilla JavaScript

The largest contentful paint is anticipating an unidentified event

Regular Expression for jQuery to match both letters and numbers, including special characters

Enhancing Visuals with src="imageUrl within Html"

How can I ensure a header is displayed on each page by utilizing CSS or JavaScript/jQuery?

Is it possible to dynamically modify the fetch URL for getServerSideProps using an onClick event?

Utilize Optional Chaining for verifying null or undefined values

What is the best way to troubleshoot errors in a Node.js application?

Is it possible for me to insert a scope into the filter as well?

Style your index with a Wordpress plugin

Tips for changing date format within Ajax javascript code

Utilizing the map function to display elements from a sub array

Different ways to pass an input file type through JavaScript within Joomla modules

Accessing a JSON file from a nearby location using JavaScript

What strategies can be utilized to address the absence of an element in an array iteration that is currently ongoing?

Why does my ngFor consistently refresh while the array remains unchanged?

React's onDragStart event listener returns empty values

Neither .getJSON() nor .ajax() are functioning for making a REST API call