how to make my bmi calculator appear and disappear on click?

April 24, 2023

so i’ve been browsing trying to get the answer but i dont have found any easy way to do it, if there is any, do you guys know any way that i can do it?

HTML:

<main id="main">
        <div class="container">
          <div class="title"> Calculadora - IMC </div>
          <div class="input">
              <label>Nome:</label>
              <input type="text" id='nome'>
          </div>
          <div class="input">
              <label>Altura:</label>
              <input type="number" id='altura'>
          </div>
          <div class="input">
              <label>Peso:</label>
              <input type="number" id='peso'>
          </div>
          <button id='calcular'>Calcular</button>
  
          <div class="result" id='resultado'></div>
        </div>
      </main>

JavaScript:

function desaparecer(){

    document.getElementById("main").style.display = "none";{
    }

CSS:

>Solution :

You can toggle a class that hides the container.

document.querySelector('#toggleVis').addEventListener('click', e => {
  document.querySelector('.container').classList.toggle('hide');
});

.hide {
  display: none;
}

<main id="main">
  <div class="container">
    <div class="title"> Calculadora - IMC </div>
    <div class="input">
      <label>Nome:</label>
      <input type="text" id='nome'>
    </div>
    <div class="input">
      <label>Altura:</label>
      <input type="number" id='altura'>
    </div>
    <div class="input">
      <label>Peso:</label>
      <input type="number" id='peso'>
    </div>
    <button id='calcular'>Calcular</button>

    <div class="result" id='resultado'></div>
  </div>
  <button id="toggleVis">Hide/Show</button>
</main>