How to make a div appear by clicking javascript button

Asked

Viewed 590 times

-3

Good afternoon, The goal was after clicking on the "check Dispanibility" button, a div already created but hidden (display: None), appeared. I was doing it through javascrip. I was doing with the document.getElementsByClassName(el).style.display = "block";
but in the inspector element of google Chrome appears me a mistake. I enclose error photo sending and all code.
In html, the hidden div is the whole set of Divs starting at <div class="escolha_quarto">

inserir a descrição da imagem aqui

function mostrar_quartos(el){
  var x=document.getElementById("tipos_de_quarto").value;
  if (x==="Individual")
  {   
    document.getElementsByClassName(el).style.display = "block";  
  }

}
#caixa{
    border: 2px solid black;
    width: 50%;
    height: 500px;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 5%;
}
#menudiv{
    position: fixed;
    z-index: 5;
}

.foto_inicial{
    width: 100%;
}

.imagem_inicial{
    width: 100%;
    height: 470px;
}
#div_total_check{
    width: 60%;
    height: 100px;
    background-color: white;
    border-radius: 15px;
    display: flex;
    margin-left: 20%;
    position: relative;
    top:-55px;
    border: 2px solid black;
}
#div_check{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.op_form{
    margin-right: 15px;
}
.botao_verificar_disponibilidade{
    background-color: burlywood;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 30px;
    font-size: 15px;
}
#adultos{
    width: 100%;   
}
#criancas{
    width: 80%;
}
#nota{
    display: flex;
    flex-direction: column;
    position: relative;
}
#texto_quartos{
    text-align: center;
}
#quartos{
    display: flex;
    flex-direction: row;
    place-content: space-between;
    margin-bottom: 3%;
  
}
.div_imagem_quarto{
    position: relative;
    height: auto;
    margin-bottom: 30px;
    width:27%;
    margin-left: 3%;
    margin-right: 3%;
}

.imagem_quarto{
    width:100%; 
    height:270px;
}

.escolha_quarto{
width: 60%;
height: 150px;
border: 2px solid rgb(167, 167, 167);
margin-left: 5%;
display: none;
flex-direction: column;
}

.tipo_quarto{
    background-color: rgb(126, 124, 124);
    width: 100%;
    height: 45px;
    align-items: center;
}
.conteudo_reserva{
    width: 100%;
    display: flex;
    flex-direction: row;
    place-content: space-between;
    align-items: center;
    margin-left: 2px;
}

.btn_reservar{
    background-color: burlywood;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 40px;
    font-size: 20px;
}
.botao_reservar{
padding-right: 10px;
}
.peq_almoco{
    margin-left: 5px;
}

.preco_quarto{
    font-size:30px;
}
<!DOCTYPE html>
<html lang="pt">
    <head>
    		<meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" type="text/css" href="../menu/menu.css">
            <link rel="stylesheet" type="text/css" href="../menu/projeto.css">
            <script src="../menu/react.js"></script>
            <script src="../menu/react-dom.js"></script>
            <link rel="stylesheet" type="text/css" href="reservar_quarto.css">
            <title>Reservar Quarto</title><!-- ALTERAR DEPOIS!!!!!!!! -->
    </head>
    <body>   
        <div id="data-hora"></div> <!-- div que vai mostrar a data e hora -->
        <!-- ------------------------------------------------------------------------------------------------->
        <header> <!-- Inserir o Cabeçalho -->
            <div id="menudiv"></div>  <!-- div para o menu -->
        </header>  
        <div id="imagem_inicial">
            <picture id="foto_inicial">
                <img class="imagem_inicial" src="../imagens/quartos/q2.jpg">
            </picture>
            <div>
            <div id="div_total_check">
                <div id="div_check"> 
                    <div class="op_form">
                        Check-in<br><input type="date">
                    </div>
                    <div class="op_form">
                        Check-out<br><input type="date">                   
                    </div>
                    <div class="op_form">
                        Tipo de quarto<br>
                        <select name="sel_adultos" id="tipos_de_quarto">1
                            <option value="Individual">Individual</option>
                            <option value="Duplo">Duplo</option>
                            <option value="Familiar">Familiar</option>
                        </select> 
                    </div>
                    <!-- <div class="op_form">
                        Crianças *<br>
                        <select name="sel_criancas" id="criancas">1
                            <option value="1">0</option>
                            <option value="1">1</option>
                            <option value="1">2</option>
                            <option value="1">3</option>
                            <option value="1">4</option>
                            <option value="1">5</option>
                        </select>    
                    </div> -->
                    <div>
                        <br>
                        <button class="botao_verificar_disponibilidade" onclick="mostrar_quartos('escolha_quarto')">Verificar disponibilidade</button>
                    </div>
                </div>
            </div>
        </div>
        <div id="Quartos_Total">
            <div id="texto">
                <h1 id="texto_quartos">Quartos e Suites</h1>
            </div>
            <div id="quartos">
                <div class="div_imagem_quarto">
                    <img class="imagem_quarto" src="../imagens/quartos/q_ind_1.jpg">
                </div>
                <div class="div_imagem_quarto">
                    <img class="imagem_quarto" src="../imagens/quartos/q1.jpg">
                </div>
                <div class="div_imagem_quarto">
                    <img class="imagem_quarto" src="../imagens/quartos/suite_2.jpg">
                </div>
            </div>
        </div>
            <div class="escolha_quarto">
                <div class="tipo_quarto"> Quarto duplo</div>
                <div class="conteudo_reserva">
                    <div class="peq_almoco">Pequeno almoço incluido</div>
                    <nav class="quarto_inclui">
                        <ul style="list-style-type: none;">
                            <li>Wifi gratuito</li>
                            <li>WC privativa</li>
                            <li>mini-bar</li>
                            <li>Serviço de quartos</li>
                        </ul>
                    </nav>
                    <div class="preco_quarto">80€</div>
                    <div class="botao_reservar">
                        <button class="btn_reservar">Reservar</button>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 50px;"></div>
        <script src="../menu/menu.js"></script> <!-- script do menu -->
        <script src="Reservar_quarto.js"></script>
    </body>   
</html>

javascript html css html5

1 answer

2


The method getElementsByClassName returns a collection. You would have to refer to the collection’s Journal.

document.getElementsByClassName(el)[0].style.display = "block";  
                                   ↑↑↑

  • Thank you so much for your help

Browser other questions tagged javascript html css html5

You are not signed in. Login or sign up in order to post.