Question 309248 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript function only executes after 2 button clicks

I tried to make a button that changes a div visibility.

Firstly I’ve add the "onclick" event in the button and code 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';
    }
}

But it only works after the 2nd click.
Then I tried to use only javascript and I’ve done 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';
    }
})

But as long as I’m not familiar with this method, it doesn’t work.
I would appreciate if you could help me!

Tags:

2

Answers


  1. 0

    I prefer using CSS class selectors instead of javascript to change CSS attributes.

    For my answer, I first declare the two objects at the top, so I can refer to them later.

    I then add a click event listener to the btn. In the button, I simply toggle a class on the div called "active".

    In CSS, I give the div’s default state as display none (can be visibility = hidden also). Then in CSS, I give the .active state of that div the display of block, but can also be visibility = visible.

    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>
    Login or Signup to reply.
  2. 0

    You didn’t show your HTML, but you are accessing the .style property of the element, which corresponds to the style attribute of the element’s HTML. If you haven’t set any style on the element in the first place, nothing will visibly happen the first time you click, but behind the scenes a style will be set and that’s why it works the second time.

    Instead, avoid inline styles altogether as they are the hardest styling to override and cause duplicate code. Instead, use CSS classes that can simply be applied, removed, or (in this case) toggled without the need for any if/then code.

    // Get your element reference just once, outside of the function, rather
// than every time the function runs
const element = document.querySelector('.blocks-fnd-div');

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

function showElement() {
  // Just toggle the use of the class
  element.classList.toggle("hidden");
}
    /* This class will be toggled to hide or show the element  */
.hidden { display: none;}
    <button>Toggle</button>
<div class="blocks-fnd-div">Some content</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search