Erro na função do botão ...Não sei qual o erro!

Front-end
, , ,
#1

Olá , programadores!!! Hoje venho aqui pprque não consegui descobrir de jeito algum , onde está o erro no meu código.
Quando eu apertar no botão , a página oculta venha aparecer visualmente.
Podem me ajudar ?index.html (1,3,KB) jvs.js (726,Bytes) style.css (1,6,KB)

Html :

Equação do 2°grau

Entendendo equações

    <h2 class = "title_1" >Equação do 1°grau</h2>


    <button  class= "btn1" onclick="AbrirConteudo()">↓</button>
    <div id = "conceit_1">
        
            <p>É usada para calcular expressões com incógnitas.<br> Por exemplo:</p>
            <p  style="margin-left: 15px;" > x + 5 = 10 </p>
            <p> A partir desta equação podemos fazer um problema m-atemático:<br>
            <strong >Eu tenho um dinheiro no bolso,mas tenho na minha mão R$5,00.Sabendo que o total de dinheiro que tenho é R$10,00 , qual o valor que tenho no bolso?</strong>
            </p>
            <p id = "p_oculto">Resposta é :tal tal tal...</p>
            <button id="btn2" onclick="Resposta()">Ver resolução </button>

        </div>

Css :slight_smile:
@charset “UFT-8”;

body{
   background-color: rgb(188, 223, 220);
}
    

h1#principal{
text-align: center;
color: #b8cffc;
}
h2 {
    color: #0f3c96;
   text-align: center;
   text-shadow: 1px  1px 2px #0922538f;
}

p {
   font-size: 20px ;
   font-family: cursive;
   text-align: justify;
   text-indent:20px;
}
#btn2{
    background-color: blue;
    height: 40px;
    width: 160px;
    font-size: 18px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-top: 25px;
    margin-left: 70%;
    color: rgb(221, 224, 5);
    border-radius: 5px;
    text-shadow: 2px 2px 5px rgb(1, 1, 75);
    box-shadow: 1px 3px 5px rgba(13, 42, 172, 0.568);
}
#btn2:hover {
    background-color: rgb(34, 42, 155);
   
}


header{
    background-color:#0f3c96;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 1px 2px 9px rgb(2, 2, 90);
}
.title_1{
    
    background-color: white;
    width: 700px;
    padding: 10px;
    margin: auto;
    border-radius: 10px;
    box-shadow: 5px 5px 15px #0f3c969d;
}

#conceit_1 {
    
    background-color: white;
    width: 700px;
    padding: 10px;
    margin: auto;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 5px 5px 15px #0f3c969d;
    
}




.btn1{
    width: 30px;
    color:#0f3c96;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;

    background-color:#0fcfe998;
    position:absolute; 
    border-radius: 4px;
    top:30%;
    left:50%;
   
}

.btn1:hover  {
    background-color: rgb(45, 189, 189);
    
}
#p_oculto {
    display: none;
}

JavaScript :
function Resposta(){

    if(document.getElementById('p_oculto').style.display == 'block'){

        document.getElementById('p_oculto').style.display =  'none' ;

        document.getElementsById('btn2').value = "Ver resposta";

        

    }else{

       document.getElementById('p_oculto').style.display =  'block' ;

       document.getElementsById('btn2').value = "Ocultar resposta";

    }    

  

}

   

function AbrirConteudo(){

    if(document.getElementsById('conceit_1').style.display == 'none'){

        document.getElementsById('conceit_1').style.display =  'block' ;

        

    }else{

       document.getElementsById('conceit_1').style.display =  'none' ;

    }   

}
#2

Esse ‘s’ do document.getElement's'ById() não deveria estar ai, essa função não existe. Basta remove-lo e o código funciona.

Futuramente, se precisar obter vários elementos com um mesmo identificador, use class ao inves de id e use document.getElementsByClassName()

1 curtida
#3

vou arrumar , qualaquer coisa respondo aqui!! Obrigado!!!