Ir ao conteúdo
  • Cadastre-se
EduardoMQS

Javascript Como se muda o display de uma label em JavaScript?

Recommended Posts

Olha meu HTML:

 

    <form method="post" action="inserir_dados.php">
        <input onclick="mostrar_inputs();" type="button" value="Mostrar Campos"/><br/><br/>
        <label class="mostrar"><span>Nome da Atividade:</span><input type="text" name="nome"/></label><br/><br/>
        <label class="mostrar"><span>Data de Início:</span><input type="date" name="data_inicio"/></label><br/><br/>
        <label class="mostrar"><span>Data de Fim:</span><input type="date" name="data_fim"/></label><br/><br/>
        <label class="mostrar"><span>Descrição:</span><input type="text" name="descricao"/></label><br/><br/>
        <label class="mostrar"><span>Custo:</span><input type="number" name="custo"/></label><br/><br/>
        <input type="submit" value="Inserir"/>
    </form>

 

Olha meu CSS:

 

        span, input{
            font-size: 16pt;
        }
        form{
            margin: 20px 0;
            border-style: solid;
            border-width: 1px;
            border-color: red;
        }
        .mostrar{
            display: none;
        }

 

Olha meu JavaScript:

 

        function mostrar_inputs(){
            document.getElementsByClassName("mostrar").style.display = "block";
        }

 

Olha meu arquivo "inserir_dados.php":

 

    <?php
        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "web";
        
        $nome = $_POST['nome'];
        $data_inicio = $_POST['data_inicio'];
        $data_fim = $_POST['data_fim'];
        $descricao = $_POST['descricao'];
        $custo = $_POST['custo'];
        
        $conn = mysqli_connect($servername, $username, $password, $dbname);
        
        if(!$conn) die("Erro ao tentar conectar com o banco de dados!");
        
        else{
            $sql = "INSERT INTO atividades1 (atividade_id, nome, data_inicio, data_fim, descricao, custo)
            VALUES (NULL,'$nome','$data_inicio','$data_fim','$descricao', $custo)";
            $result = mysqli_query($conn, $sql);
            if(!$result) die("Erro ao tentar inserir dados!");
            else die("Dados inseridos com sucesso!");
        }
        
        $conn->close();
    ?>

 

Eu clico no botão "Mostrar Campos" e não aparece as labels, mesmo com o código acima. Então como se corrige esse erro?

Compartilhar este post


Link para o post
Compartilhar em outros sites

getElementsByClassName retorna um array, portanto, para alterar todos, você deve percorrer esse array, por exemplo:

 

function mostrar_inputs()
{
	var labels = document.getElementsByClassName("mostrar");
	for(var i = 0; i < labels.length; i++)
    	labels[i].style.display = "block";
}

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×