Toggle element with cssText

Question

I want to toggle element visibility. Currently, when clicking button1, it's just hiding, and not toggling.

This is my code and I want to know why it doesn't show button2 after hiding it.

function fonk10() {
var x = document.getElementsByClassName("eben")[0];
    if (x.style.cssText === "display:none") {
        x.style.cssText = "display:inline-block";
    } else {
        x.style.cssText = "display:none";
    }
}

.eben{
  background:green;
  padding:5px;
  display:inline-block;
}

#eben{
  background:green;
  padding:5px;
  display:inline-block;
}

<div id="eben" onclick="fonk10()">BUTTON1</div>
<div class="eben">BUTTON2</div>

Hint: add `console.log(x.style.cssText)` before the `if` and make sure it matches *exactly* what you have after the `===`. — Heretic Monkey, Sep 16 '18 at 13:13
because there is a space and `;` : `display: none;` and honestly this is the wort way to read CSS — Temani Afif, Sep 16 '18 at 13:13
i'm newbie javascript user so i don't know what to do, can u give me prepared code? — novruzrhmv, Sep 16 '18 at 13:18
possible duplicate of : https://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript — Temani Afif, Sep 16 '18 at 13:24
it's 100% related to the question. The duplicate question will show you the exact way to read CSS property and use them — Temani Afif, Sep 16 '18 at 13:33

Mamun · Accepted Answer · 2018-09-16T14:13:23.520

The condition you are using is always false. That's why always else is executing. You have to format the string little bit by inserting space after : and ; at last.

Change

if (x.style.cssText === "display:none") {

To

if (x.style.cssText === "display: none;") {

function fonk10() {
  var x = document.getElementsByClassName("eben")[0];
  if (x.style.cssText === "display: none;") {
      x.style.cssText = "display: inline-block";
  } else {
      x.style.cssText = "display: none";
  }
}

.eben{
  background:green;
  padding:5px;
  display:inline-block;
}

#eben{
  background:green;
  padding:5px;
  display:inline-block;
}

<div id="eben" onclick="fonk10()">BUTTON1</div>
<div class="eben">BUTTON2</div>

You can also use display property like the following way:

function fonk10() {
var x = document.getElementsByClassName("eben")[0];
  if (x.style.display === "none") {
      x.style.display = "inline-block";
  } else {
      x.style.display = "none";
  }
}

.eben{
  background:green;
  padding:5px;
  display:inline-block;
}

#eben{
  background:green;
  padding:5px;
  display:inline-block;
}

<div id="eben" onclick="fonk10()">BUTTON1</div>
<div class="eben">BUTTON2</div>

thank you so much. codes are exactly what i want and it works fine. — novruzrhmv, Sep 16 '18 at 13:53

score 1 · Answer 2 · answered Sep 16 '18 at 13:31

1

Very nice question: you need inline stiles for the second button. You also need "orthographic precision" for your css roules. But I wouldn't recommend doing it in production.

var x = document.getElementsByClassName("eben")[0];
function fonk10() {console.log(x.style.cssText)

    if (x.style.cssText === "display: inline-block;") {
        x.style.cssText = "display: none;"
    } else {
        x.style.cssText = "display: inline-block;";
    }
}

.eben,#eben{
  background:green;
  padding:5px;
  display:inline-block;
}

<div id="eben" onclick="fonk10()">BUTTON1</div>
<div class="eben"  style="display: inline-block;">BUTTON2</div>

answered Sep 16 '18 at 13:31

enxaneta

31,608
5
29
42

1

if you keep the initial if else we don't need inline style because we will fall into the else and starting from there we will have inline styles – Temani Afif Sep 16 '18 at 13:34
thanks lot! it's working. i try and i found that i don't need inline style and console log, very thanks again. – novruzrhmv Sep 16 '18 at 13:44

Osama · Answer 3 · 2018-09-16T15:26:53.370

0

Create a Boolean variable explain your element status let us call it show , according to the element if it is displayed then show will be true else if hidden and make the validation with this variable

var show=true;
var x = document.getElementsByClassName("eben")[0];
 function fonk10() {
if (show===false) {
    x.style.cssText = "display:inline-block";
show=true;
    } else {
        x.style.cssText = "display:none";
        show=false;
     }
  }

edited Sep 16 '18 at 15:26

answered Sep 16 '18 at 13:45

Osama

2,912
1
12
15

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](//meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Luca Kiebel Sep 16 '18 at 15:03

Toggle element with cssText

3 Answers3