0

There is a form which opens and closes and uses style="display: block" when clicked to open and style="display: none" when closed. I have used javascript to print to the console when each condition is met, however no matter what I try the if statement always remains visible.

When I try to console.log it returns the correct value of the current display option. Here is the code:

console.log(document.querySelector('.request-quote-form').style.display)

When I run the function it always prints out visible. Any ideas? I have also tried this in jQuery and I'm receiving the same results. 

document.querySelector('.js-request-quote-btn').addEventListener('click', function() {
    console.log(document.querySelector('.request-quote-form').style.display);
    if (document.querySelector('.request-quote-form').style.display === "block") {
        console.log("visble");
    } else {
        console.log("nope");
    }
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Adam Mitchell
  • 15
  • 4
  • Can you provide a [mcve], preferably in the form of a live demo using the [snippets feature](https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). – Quentin Jan 17 '17 at 15:46
  • Please try to use only two `=`, so that it says `.. .style.display == "block"`. I assume the returned value isn't the same datatype. – Philipp Meissner Jan 17 '17 at 15:49
  • The issue is because you need to use the computed style: https://jsfiddle.net/h3gLfcvn/. See the duplicate for more information. Or better yet, use jQuery – Rory McCrossan Jan 17 '17 at 15:50

0 Answers0