Jak sprawić, żeby po wywołaniu funkcji pojawił się div?

Question

Mam div z jakimś kwadratem, chciałbym, żeby ten kwadrat był niewidoczny i pojawiał się dopiero po uruchomieniu funkcji (np; przez onclick). W jaki sposób to zrobić? Powiedźmy, że istnieje taki kwadrat: 

<div id="scena2"></div>

#scena2{
  width: 300px;
  height: 500px;
  background: gray;
  border-radius: 10px;
  margin-left: auto; 
  margin-right: auto;
  margin-bottom: 800px;
  margin-top: -500px;
}

I jakiego kodu js użyć, by był niewidoczny i się wywołał przy odpowiedniej funkcji? (niewidoczność nie musi być w js)

Answer 1

Masz kilka opcji. Mozesz uzyc vanilla JavaScript. Tutaj przyklad:

https://codepen.io/Alex-Iron/pen/YaabLE

Kod:

div#scena2{
  width: 300px;
  height: 500px;
  background: gray;
  border-radius: 10px;
  margin-left: auto; 
  margin-right: auto;
/*   margin-bottom: 800px; */
/*   margin-top: -500px; */
  display: none;
}

document.getElementById("btn")
  .addEventListener('click', ()=>{
  document.getElementById('scena2')
    .style.display="block";
})

Lub mozesz uzyc jQuery.

https://codepen.io/Alex-Iron/pen/KooLBO

Kod:

$('#btn').on('click',()=>{
  $('#scena2').css('display','block');
})

W tym wypadku domyslnie chowamy #scena2 uzywajac display:none. Uzywajac jQuery mozesz np ukryc ten element przy wczytaniu strony, po czym pokazac go po wcisnieciu przycisku.