Quiero alternar la visibilidad del elemento. Actualmente, al hacer clic en el botón 1, solo se esconde y no se alterna.

Este es mi código y quiero saber por qué no muestra el botón 2 después de ocultarlo.

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>
1
novruzrhmv 16 sep. 2018 a las 16:10

3 respuestas

La mejor respuesta

La condición que está utilizando es siempre false. Es por eso que siempre else se está ejecutando. Debe formatear un poco la cadena insertando espacio después de : y ; por fin.

Cambio

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

Para

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>

También puede usar la propiedad display de la siguiente manera:

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>
1
Mamun 16 sep. 2018 a las 14:13

Cree una variable booleana, explique el estado de su elemento, permítanos llamarlo show, de acuerdo con el elemento si se muestra, show será verdadero de lo contrario si está oculto y haga la validación con esta 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;
     }
  }
0
Osama 16 sep. 2018 a las 15:26

Muy buena pregunta: necesitas estilos en línea para el segundo botón. También necesita "precisión ortográfica" para sus rutas CSS. Pero no recomendaría hacerlo en producción.

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>
1
enxaneta 16 sep. 2018 a las 13:31