The JavaScript function will only run after the user clicks the button twice

Question

The JavaScript function will only run after the user clicks the button twice

I attempted to create a button that toggles the visibility of a div element.

Initially, I added the "onclick" event to the button and wrote this function:

function showElement() {
  var element = document.querySelector('.blocks-fnd-div');
    if (element.style.visibility == 'hidden') {
      element.style.visibility = 'visible';
    }
    else {
      element.style.visibility = 'hidden';
    }
}

However, it only functions properly after the 2nd click. I then tried using just JavaScript and came up with this code:

$('.appr-btn').click(function() {
  var element = document.querySelector('.blocks-fnd-div');
    if (element.style.visibility == 'hidden') {
      element.style.visibility = 'visible';
    }
    else {
      element.style.visibility = 'hidden';
    }
})

Since I am not very familiar with this approach, it doesn't seem to work. I would greatly appreciate any assistance you could provide!

javascript button

Answer 1

Answer №1

The HTML code you provided does not include any .style property, but it seems like you are trying to access the style attribute of the element. If the element does not have any inline styles initially, clicking on it may not have any visible effect the first time. However, behind the scenes, a style attribute will be set, which is why it works the second time.

It is recommended to avoid using inline styles as they can be difficult to override and may lead to code duplication. Instead, consider using CSS classes that can be easily applied, removed, or toggled without the need for complex if/else statements.

// It is more efficient to get the element reference outside the function
// rather than querying it every time the function is called
const element = document.querySelector('.blocks-fnd-div');

document.querySelector("button").addEventListener("click", toggleElement);

function toggleElement() {
  // Simply toggle the presence of the 'hidden' class
  element.classList.toggle("hidden");
}

/* This class is responsible for hiding or showing the element */
.hidden { display: none;}

<button>Toggle</button>
<div class="blocks-fnd-div">Some content</div>

Answer 2

The HTML code you provided does not include any .style property, but it seems like you are trying to access the style attribute of the element. If the element does not have any inline styles initially, clicking on it may not have any visible effect the first time. However, behind the scenes, a style attribute will be set, which is why it works the second time.

It is recommended to avoid using inline styles as they can be difficult to override and may lead to code duplication. Instead, consider using CSS classes that can be easily applied, removed, or toggled without the need for complex if/else statements.

// It is more efficient to get the element reference outside the function
// rather than querying it every time the function is called
const element = document.querySelector('.blocks-fnd-div');

document.querySelector("button").addEventListener("click", toggleElement);

function toggleElement() {
  // Simply toggle the presence of the 'hidden' class
  element.classList.toggle("hidden");
}

/* This class is responsible for hiding or showing the element */
.hidden { display: none;}

<button>Toggle</button>
<div class="blocks-fnd-div">Some content</div>

Answer 3

Answer №2

My preference leans towards utilizing CSS class selectors rather than resorting to javascript in order to alter CSS attributes.

When crafting my response, I make it a point to initialize the two objects at the beginning for future reference.

Subsequently, I attach a click event listener to the btn. Within the button, I simply switch a class on the div named "active".

Within the CSS realm, I establish the div's default state as display none (alternatively, visibility = hidden). Following this, I set the .active state of the div to display block, while visibility = visible could also suffice.

const apprBtn = document.querySelector(".appr-btn");
const blocksDiv = document.querySelector(".blocks-fnd-div");

apprBtn.addEventListener("click",(e) => {
    blocksDiv.classList.toggle("active");
});

.blocks-fnd-div{
  display:none;
}

.blocks-fnd-div.active{
  display:block;
}

<button class="appr-btn">Toggle Div</button>
<div class="blocks-fnd-div">blocks-fnd-div</div>

Answer 4

My preference leans towards utilizing CSS class selectors rather than resorting to javascript in order to alter CSS attributes.

When crafting my response, I make it a point to initialize the two objects at the beginning for future reference.

Subsequently, I attach a click event listener to the btn. Within the button, I simply switch a class on the div named "active".

Within the CSS realm, I establish the div's default state as display none (alternatively, visibility = hidden). Following this, I set the .active state of the div to display block, while visibility = visible could also suffice.

const apprBtn = document.querySelector(".appr-btn");
const blocksDiv = document.querySelector(".blocks-fnd-div");

apprBtn.addEventListener("click",(e) => {
    blocksDiv.classList.toggle("active");
});

.blocks-fnd-div{
  display:none;
}

.blocks-fnd-div.active{
  display:block;
}

<button class="appr-btn">Toggle Div</button>
<div class="blocks-fnd-div">blocks-fnd-div</div>

The JavaScript function will only run after the user clicks the button twice

Answer №1

Answer №2

Similar questions

Using Bootstrap CSS and JavaScript specifically for carousel functionality

Matching stroke-dashoffset in SVG between two distinct paths

Issue with utilizing addEventListener("load") in Firefox in conjunction with <iframe>

Ways to eliminate the Vuetify append-icon from the sequential keyboard navigation

Ensure that Google Tag Manager (GTM) delays the pageview until the SPA URL title is available

Click on link after animation has finished

Error: Unable to instantiate a THREE.Scene object in Three.js due to TypeError

Issue encountered while constructing an array within the component data following the 'created' event

Add items to a separate array only if the material UI checkbox is selected

Browserify does not provide access to the require function in the browser environment

The "src" attribute is missing from the image on the left side

ajax: ensure utf-8 encoding is applied

jQuery Issue DetectedSlight complication spotted with jQuery

How to Force a jQuery Redraw Following Data Retrieval Using Ajax

Each time a new client connects, socket.io replicates the information

Vue.js 2 components encountering issue with parent-child relationship due to undefined item

How to choose the desired day within a specific month when creating a calendar from scratch?

The function $.getJSON() seems to be non-responsive

If the user decides to change their answer, the current line between the two DIVs will be removed

Is there a way to asynchronously load image src URLs in Vue.js?