HTML Meu botão não quer acionar o menu de login

Igor Gabriel Boeck · 9 de janeiro de 2019

Galera, estou criando um site, eu fiz um menu de login que é acionado quando clica no botão, estou utilizando jquery para fazer isso. Só que, quando clico no botão, não acontece nada, não sei se está faltando alguma linha de código, se tem uma a mais, etc. Deem uma olhada no código.


<!DOCTYPE HTML>

<html>
    <head>
        <title>Login</title>
        <link rel="icon" type="imagem/png" href="ame_icon.png" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        

        <script src="js/jquery.min.js"></script>
        <script src="js/skel.min.js"></script>
        <script src="js/skel-layers.min.js"></script>
        <script src="js/init.js"></script>
        <script type="text/javascript"></script>
        <noscript>
            <link rel="stylesheet" href="css/skel.css" />
            <link rel="stylesheet" href="css/style.css" />
            <link rel="stylesheet" href="css/style-xlarge.css" />
        </noscript>
    </head>
    <body id="top">

        <!-- Header -->
                <header id="header" class="skel-layers-fixed">
                <h1><a href="index.html">ASSOCIA&Ccedil;&Atilde;O MUNICIPAL DOS ESTUDANTES</a></h1>
                <nav id="nav">
                
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="consultarcarteirinha.html">Consultar Carteirinha</a></li>    
                        


         <!-- Login_Menu -->
                    
                    <li><a href="#" class="button special" id="login">LOGIN</a></li>
                    
                    
                    <div class="login-form">
                        <form>
                            <div>

                            <label>Usu&aacute;rio</label>
                            <input type="text" placeholder="Usu&aacute;rio" requered/>

                            </div>

                            <div>

                            <label>Senha</label>
                            <input type="password" placeholder="Senha" requered/>

                            </div>

                        

                            <div>
                                                    
                            <input type="submit" value="Entrar"  style="width: 250px; height: 40px"/>

                            </div>
                            <br>
                        </form>
                    <div/>
                    
                    
                    
                    </ul>
 
                </nav>

                <!-- Script Animação Menu-->

            <script type="text/javascript">

                $(document).ready(function(){
                    var form = $(.login-form);
                    var status = false;

                $("#login").click(function(event){
                    event.preventDefault();

                    
                    if (status == false){
                    form.fadeIn();
                    status = true;
                    
                    }else{
                    form.fadeOut();
                    status = false;

                    }
                })
            })

            </script>

            </header>
            
            
            
 
        <!-- Main -->
            <section id="main" class="wrapper style1">
                <header class="major">
                    <h2>LOGIN</h2>
                    
                </header>
                
            </section>

        <!-- Footer -->
            <footer id="footer">
                <div class="container">
                    <div class="row double">
                        
                        <div class="6u">
                            <h2>Entre em contato com a gente</h2>
                            <p>Endere&ccedil;o: Av. Cuiab&aacute;, n&#176; 3098, em frente a Facimed (anexo a WebC&oacute;pias).
                            <br> Telefone: 3443-4001
                            <br> Whatsapp: (69) 9 9958-3178 / (69) 9 9385-6070 
                            </p>
                            <ul class="icons">
                                
                                <li><a href="https://www.facebook.com/amecarteirinhas" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                                
                            </ul>
                        </div>
                    </div>
                    <ul class="copyright">
                        <li>&copy; Untitled. All rights reserved.</li>
                    </ul>
                </div>
            </footer>

            
            
            
    </body>
</html>

Luís Roberto C. da Silva · 9 de janeiro de 2019

Utilize a função código do fórum. É só clicar no botão <> na barra do editor. Dessa forma melhora a leitura do código.

Matheus Evandro Rech · 9 de janeiro de 2019

Boa Tarde @Igor Gabriel Boeck,

Faltou a função onClick

Veja de exemplo esse código:

<div class="login">
	<a style="font-family:Oswald;">Login:</a>
    <input type="text" id="login" class="caixalogin">

    <a style="font-family:Oswald;">Senha:</a>
    <input type="password" id="senha" class="caixalogin">
    <input type="button" onClick="testesenha()" class="caixalogin" Value="Entrar">

    <img src="imagens/cas-padlock-icon.png" id="imglogin" height="42" width="42">
    <a style="font-family:Oswald" id="txtlog">Faça o Seu Login</a>
</div>

Eu criei uma function() com o nome de testesenha() e quando eu clico no botão ele executa o bloco de código

Pelo que vi por cima acho que é isto

Igor Gabriel Boeck · 9 de janeiro de 2019

25 minutos atrás, Matheus Evandro Rech disse:
Boa Tarde @Igor Gabriel Boeck,

Faltou a função onClick

Veja de exemplo esse código:
<div class="login">
	<a style="font-family:Oswald;">Login:</a>
    <input type="text" id="login" class="caixalogin">

    <a style="font-family:Oswald;">Senha:</a>
    <input type="password" id="senha" class="caixalogin">
    <input type="button" onClick="testesenha()" class="caixalogin" Value="Entrar">

    <img src="imagens/cas-padlock-icon.png" id="imglogin" height="42" width="42">
    <a style="font-family:Oswald" id="txtlog">Faça o Seu Login</a>
</div>
Eu criei uma function() com o nome de testesenha() e quando eu clico no botão ele executa o bloco de código

Pelo que vi por cima acho que é isto

Então, não funcionou para mim. Tipo, eu tenho um botão que fica no canto da tela, e quando eu clico nele abre um menu, fiz os teste com esse comando e não funcionou

DiF · 9 de janeiro de 2019

@Igor Gabriel Boeck Faltou aspas aqui:

var form = $(.login-form);

Sempre dentro de parenteses, no jQuery precisa por aspas.

Enfim, espero que isso seja só um exemplo e um teste de aprendizado, pois sistemas de login devem ser feitas com linguagem de programação server side e banco de dados.

Igor Gabriel Boeck · 9 de janeiro de 2019

@DiF que bobeira kkkk consegui resolver. Então, o sistema de login não esta pronto, esse só é o menu, vou fazer em php

Matheus Evandro Rech · 9 de janeiro de 2019

10 minutos atrás, Igor Gabriel Boeck disse:

Então, não funcionou para mim. Tipo, eu tenho um botão que fica no canto da tela, e quando eu clico nele abre um menu, fiz os teste com esse comando e não funcionou

Desculpa eu me enganei achei que você teria feito parecido com o meu so que fiz com ajax