show/hide an element JS

Question

Button can show, but can't hide an element after showing. Could you tell me where i'm wrong?

document.querySelector('.btn1').onclick = function(e) {
  let a = document.querySelector('.btn1content')
  if (a.style.display = ('none')) {
    a.style.display = ('block')
  } else {
    a.style.display = ('none')
  }
}

.btn1content {
  display: none;
}

<button class="btn1" BUTTON</button>
<p class="btn1content">Lorem ipsum</p>

In your `if/else` you are using the assignment operator `=` and not equals to. Try `if(a.style.display == ('none')) {...}`. For reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#comparison_operators — justDan, Jul 22 '21 at 12:36
1) first `=` should be `==` - 2) initial state will be `""` and not `"none"`, take that into account or use `getComputedStyle` — CherryDT, Jul 22 '21 at 12:37
Change `class="btn1"BUTTON` to `class="btn1">BUTTON`, change `a.style.display = ('none')` to this `a.style.display === 'none'` — Robert, Jul 22 '21 at 12:40
@Andreas: Agreed on the parens, but semicolons are a matter of personal style (some style guides such as https://standardjs.com/ don't use them either) — CherryDT, Jul 22 '21 at 12:40
It's not a matter of _personal style_. There are defined rules when a semicolon is added by ASI. And that can mess up your script quite easily... [using immediately invoked function expression(IIFE)](https://stackoverflow.com/questions/59208059/using-immediately-invoked-function-expressioniife) — Andreas, Jul 22 '21 at 12:43
@CherryDT I would recommend always use semicolons as not using them can lead to bugs. — Robert, Jul 22 '21 at 12:44
@Andreas It is, the problem you mentioned can be handled by the style guide as well by inserting a semicolon _before_ such a line, see https://standardjs.com/rules.html#semicolons — CherryDT, Jul 22 '21 at 12:45
@CherryDT a dev shouldn't rely on a linter, using semicolons is elementary and is probably one of the first things devs are taught when writing statements. — Robert, Jul 22 '21 at 12:47
Well if a dev shouldn't rely on a linter, then the language shouldn't allow mistakes like the `=` in this question either... But it does. And it has ASI, so it's obviously fine to use that functionality. As the link I shared (and the pages linked from there) shows, it's a matter of opinion and style, and there are many companies and projects using a style that doesn't use semicolons (npm, GitHub, MongoDB, Express, to name a few). But I don't want want to derail this further, I am fine to agree to disagree, I just wanted to show there are different perspectives to this and not one "right" way — CherryDT, Jul 22 '21 at 12:51

score 1 · Answer 1 · answered Jul 22 '21 at 12:36

1

you are not closing button tag. Try this

<button class="btn1">BUTTON</button>
<p class="btn1content">Lorem ipsum</p>

jQuery will be

$(document).ready(function () {
            document.querySelector('.btn1').onclick = function (e) {
                let a = document.querySelector('.btn1content')
                if (a.style.display == ('none')) {//there will ==
                    a.style.display = ('block')
                } else {
                    a.style.display = ('none')
                }
            }
            
        });

answered Jul 22 '21 at 12:36

Amit Verma

2,450
2
8
21

This solves 2 of 3 issues - initial style will be `""` so the first time will need two clicks to show the button – CherryDT Jul 22 '21 at 12:43
@CherryDT initial style will be display none as mentioned in css – Amit Verma Jul 22 '21 at 12:44
No, it won't be because it comes from a CSS rule and not a style directly applied to the element. The initial _computed_ style will be `"none"`, but this code doesn't use `getComputedStyle`. – CherryDT Jul 22 '21 at 12:47

score 0 · Answer 2 · answered Jul 22 '21 at 12:57

0

HTML

<button class="btn1">BUTTON</button>
<p class="btn1content">Lorem ipsum</p>

Jquery

$(document).on('click', '.btn1', function(){
    $('.btn1content').toggle()
})

Note - No need to change any CSS

answered Jul 22 '21 at 12:57

Jyotsna maurya

66
7

show/hide an element JS

2 Answers2