-1

I want make appear/disappear table in my page. I will click the button and it will show up and then i will click the same button again and it will disappear.

Js code: 

function showtable1() {
var x = document.getElementById('table1');
if (x.style.display = 'none') {
  x.style.display = 'block';
} else {
 x.style.display = 'none';
}
}

css code: 

#table1 {
    width: 64%;
    height: 80%;
    border: 2px solid red;
    border-radius: 12px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -10%;
    transform: translate(0);
    display:none;
    background-color: rgba(247, 243, 243, 0.849);
}

Its appearing but when i trying to disappear its not working.

Orçun Demirtürk
  • 19
  • 1
  • 1
  • 3
  • 1
    Hi. You’ve got a logic error in the `if` clause. Use `==` or `===` for comparison. If you use a single `=`. this value will be assigned to `x.style.display` and will always evaluate to true, immediately setting the value back to `block`. – Boldewyn Jun 25 '19 at 19:06
  • toggle a css class, so much easier. – epascarello Jun 25 '19 at 19:10
  • Ups, sorry i fix that. But this time i have different problem. I need to click two times to appear table. Is there any solution for this or its just me to have this problem. – Orçun Demirtürk Jun 25 '19 at 19:12

1 Answers1

0

Looks like you are doing your if-statements wrong.

if (x.style.display = 'none')

With this line you are not checking if display is none, you are assigning it the value none To compare values you have to use == or === You can read here more about the difference between those two: Which equals operator (== vs ===) should be used in JavaScript comparisons?

But for your code it should look like that:

function showtable1() {
   var x = document.getElementById('table1');
   if (x.style.display === 'none') {
       x.style.display = 'block';
   } else {
       x.style.display === 'none';
   }
 }
Alex Berger
  • 1,357
  • 1
  • 10
  • 22
  • thank your for your answer. But this time i have different problem. I need to click two times to appear table. Is there any solution for this or its just me to have this problem. – Orçun Demirtürk Jun 25 '19 at 19:14