Question 49286 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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:

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    You need to modify your HTML Button a trigger on a "OnClick" event

    HTML

    <body>
<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' onclick= "desaparecer()">Calcular</button>
  
          <div class="result" id='resultado'></div>
        </div>
</main>
</body>

    JavaScript

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

    Test Playground : https://jsfiddle.net/yqfspxkd/1/ (CLick Run on the top left first)
    Reference : https://linuxhint.com/trigger-click-event-javascript/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search