Estoy tratando de hacer un botón que muestre texto adicional cuando se presiona, sin embargo, solo puedo hacerlo

  • a) muestra el texto por defecto o
  • b) oculta el texto por defecto pero el botón no funciona.

Aquí está el código JS para el botón:

function showInfo() {
  var x = document.getElementById("myDIV");
  
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myDIV">
 Hello World
</div>
<button type="button" class="btn btn-primary" click="showInfo()">
Show Info
</button>

¿Hay alguna manera de establecer el estilo predeterminado.display en none?

0
wasianpower 7 oct. 2019 a las 21:40

3 respuestas

La mejor respuesta

Su controlador es click. Tiene que ser onclick. Además, le recomiendo agregar una clase con display:none a su div, o simplemente incluirlo, de esta manera:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myDIV" style="display: none">
 Hello World
</div>
<button onclick="showInfo()">
Show Info
</button>

Entonces su JS puede verse así:

function showInfo() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    return x.style.display = "block";
  }
  return x.style.display = "none";
}

Demostración

function showInfo() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    return x.style.display = "block";
  }
  return x.style.display = "none";
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <div id="myDIV" style="display: none">
     Hello World
    </div>
    <button onclick="showInfo()">
    Show Info
    </button>
0
Dalorzo 7 oct. 2019 a las 20:36

Debe usar CSS para establecer el estilo predeterminado para cualquier elemento, ya sea vinculando a un archivo CSS externo o entre las etiquetas de apertura y cierre <style> en su archivo HTML.

Me gusta así

#myDIV {
  display: none;
}
1
Uchenna Iheanacho 7 oct. 2019 a las 19:07

Parece que no hay problema con su código JS.

En lugar de

Corrija su HTML, es 'onclick' en lugar de simplemente 'hacer clic'

<button onclick="showInfo()">
0
Bilal Siddiqui 7 oct. 2019 a las 18:53