Jump to content
BrunoJavan

[Resolvido] getElementById retornando null

Recommended Posts

Olá, estou com um problema no mínimo curioso. Tenho uma div com ID "conteudo" e na hora de pegar essa div através do getElementById  ou até mesmo do querySelector, SEMPRE retorna null no console. O mais estranho é que se eu digito diretamente no console,  funciona normalmente. Detalhe: isso acontece tanto no Firefox quanto no Chrome.

Segue código abaixo:
 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Relógio</title>
	<script>
		console.log(
			document.getElementById("conteudo")
		);
	</script>
</head>
<body>
	<div id="conteudo">teste</div>
</body>
</html>

 

To até agora tentando entender pq sempre retorna null mas quando digito diretamente no console do navegador funciona. Alguém sabe me dizer que treta é essa?

Share this post


Link to post
Share on other sites

Você está executando o JS antes de a div existir no DOM.

 

Tente assim:

<body onload="fazAlgumaCoisaComADiv();">

ou coloque seu JS imediatamente antes do fechamento do body (sim, no final do arquivo).

 

Outras sugestões: https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By mamotinho
      Oii, gostaria de pedi a  ajuda de vocês que entende melhor de javascript, estou tentando clica em um item no meu site para ser exibido sobre a página uma div que está escondido porém está dando erro no javascript, segue abaixo o erro e o código JS utilizado.
       
      cabaldark.js:25 Uncaught TypeError: Cannot read property 'style' of null at abrirDesc (cabaldark.js:25) at HTMLDivElement.onclick (CashIndex.php?v1=1&v2=C13FC8F97845403A9C62BB277C614590:52) abrirDesc @ cabaldark.js:25 onclick @ CashIndex.php?v1=1&v2=C13FC8F97845403A9C62BB277C614590:52
      AQUI É O CÓDIGO JS QUE ESTÀ A FUNÇÃO.

       
      function abrirSub(id) { if(document.getElementById('sub'+id).style.display=="block"){ var test = document.getElementsByClassName("submenu"); for(i = 0; i < test.length; i++){ document.getElementsByClassName('submenu')[i].style.display='none'; } }else{ var test = document.getElementsByClassName("submenu"); for(i = 0; i < test.length; i++){ document.getElementsByClassName('submenu')[i].style.display='none'; } document.getElementById('sub'+id).style.display="block"; } } function mensagemClose(){ document.getElementsByClassName('mensagem')[0].style.display='none'; } function detalhesClose(){ var test = document.getElementsByClassName("detalhes"); for(i = 0; i < test.length; i++){ document.getElementsByClassName('detalhes')[i].style.display='none'; } } function abrirDesc(id){ if(document.getElementById('detalhes'+id).style.display=="block"){ var test = document.getElementsByClassName("detalhes"); for(i = 0; i < test.length; i++){ document.getElementsByClassName('detalhes')[i].style.display='none'; } }else{ var test = document.getElementsByClassName("detalhes"); for(i = 0; i < test.length; i++){ document.getElementsByClassName('detalhes')[i].style.display='none'; } document.getElementById('detalhes'+id).style.display="block"; } }  

    • By Santos_2015
      tenho array que está sendo preenchido assim:
      $dados = array([0] => "Nome",[1] => "SobreNome",[2] => "null"); queria que ficasse dessa forma:
      $dados = array([0] => "Nome",[1] => "SobreNome",[2] => null); pois estou extraindo os valores do array com array_values  pra colocar em um INSERT, os campos que podem ser null são do tipo date(BD mysql),
      então tenho que retirar as aspas quando o valor vier null , ou no próprio array, ou após o array_values, alguma sugestão?  
    • By mamotinho
      Olá, boa noite! estou em dúvidas e gostaria que alguém me ajudasse, bom eu tenho uma procedure no meu SQL 2017 e dentro da procedure tem if com com return de mensagem , e eu queria exibir essa mensagem após a pessoa executa a função no meu sistema. segue abaixo como está
       


    • By Israel Lira
      Caros, não estou sabendo implementar duas consultas quando o usuário clicar no (button). É uma proposta de apresentar a folha, mostrar os funcionários pelo SELECT .  Atualmente, consigo fazer com que ele veja se existe a referencia e se não existir apresenta um span de não encontrado. Preciso que faça de imediato uma sub-consulta trazendo os dados do select abaixo e se possivel implementar um exemplo calculando por exemplo um desconto de inss, por exemplo.: Salário: 1200,00  * 8% = 96,00.    
       
      consultaBanco("SELECT funcionario.nome, funcionario.cargo, cargo.salario, folhamesano.mesano FROM funcionario, cargo, folhamesano WHERE funcionario.cargo = cargo.descricao AND folhamesano.mesano='{$codigoMes}'");
       
      Segue primeiro o consulta folha:
       
       <!DOCTYPE html>
      <html>
      <head>
          <title>Consultar Folha</title>
          <link rel="stylesheet" type="text/css" href="style.css" >
          <!-- 
              Por comodidade, eu estou usando jquery direto do site deles, isso é mto comum e recomendado inclusive.
          -->
          <script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>
          <script src="js/jquery.mask.min.js" type="text/javascript"></script>
          <script type="text/javascript">
              $(document).ready(function(){
                  $("#cpf").mask("000.000.000-00");
                  $("#rg").mask("0.000.000");
                  $("#horario").mask("00:00");
                  $("#Mesano").mask("00/0000");
              });
              /**
               * Este aqui é o nosso método Javascript que irá fazer a requisição assincrona
               */
              function pesquisarMesano(codigoMes) {
                  document.getElementById('mensagem_erro').innerText = '';
                  /** Teste*/
                  document.getElementById('mensagem_folha').innerText = '';
                  /** Teste*/
                  
                  $.get(
                      '/FOLHADEPAGAMENTO/RECIBOFOLHA/obtemFolhaPorCodigo.php',
                      { codigoMes: codigoMes },
                      
                      function (response) {
                          
                          if (response.erro === 404) {
                              /**
                               * Eu nao estou usando o Jquery para obter os elementos, isso pq na versao do Javascript dos navegadores modernos, nao é mais necessario o jquery para isso
                               */
                              document.getElementById('formFolhamesano').reset();
                              document.getElementById('mensagem_erro').innerText = 'Folhamesano #'+codigoMes+' não encontrado!';
                              
                              return;
                          }
                          document.getElementById('mensagem_folha').innerText = 'Folhamesano #'+codigoMes+' teste!';
                          document.getElementById('mesano').value = response.mesano;
                          document.getElementById('nome').value = response.nome;
                          document.getElementById('cargo').value = response.cargo;
                          document.getElementById('salario').value = response.salario;
                          document.getElementById('descricao').value = response.descricao;
                          document.getElementById('horario').value = response.horario;
                      },
                      'json'
                  );
              }
          </script>
          
          <style type="text/css">
        
              #corposistema{
                  width: 1200px auto;
                  height: 500px auto;      
              }
              #corpocadastro{
                  border: solid gray 5px;
                  width: 300px;
                  height: 210px;
                  border-radius: 5px;
                  margin: 120px auto;
                  background: white;
                  padding: 50px;
              }
              #botao{
                  color: #fff;
                  margin-left: 370px;
                  margin-top: -170px;
                  background: #337ab7;
                  border-radius: 85%;
                  background: #337ab7;
                  text-align: center;
                  padding-top: 0 auto;
              }
              #botaocancelar{
                  height: 70%;
                  color: #fff;
                  margin-left: 370px;
                  margin-top: -5px;
                  padding-top: 0 auto;
                  background: #337ab7;
                  text-align: center;
                  border-radius: 85%;
              }
          </style>
      </head>
      <?php
      include "banco_de_dados.php";

      if(!empty($_GET['codigoMes'])){
          $codigoMes = (int) $_GET['codigoMes'];
          
          $row = consultaBanco("SELECT funcionario.nome, funcionario.cargo, cargo.salario, folhamesano.mesano from funcionario, cargo, folhamesano WHERE funcionario.cargo = cargo.descricao AND folhamesano.mesano='{$codigoMes}'");
          $codigoMes = $row['codigoMes'];
          $nome = $row['nome'];
          $rg = $row['rg'];
          $cpf = $row['cpf'];
          $descricao = $row['descricao'];
          $horario = $row['horario'];
          
      } else $codigoMes = $nome = $rg = $cpf = $descricao = $horario = null;
          
      ?>
      <body>
          <div id="corposistema">
              <div id="corpocadastro">
                  <form id="formFolhamesano" action="/FOLHADEPAGAMENTO/RECIBOFOLHA/CADASTROFOLHA.php" method="POST">
                          <p>
                                  <label>Competência </label>
                                  <input name="codigoMes" id="Mesano" type="text" style="width: 20%" value="<?=$codigoMes?>" required/>
                                  <button type="button" onclick="pesquisarMesano(this.form.elements['codigoMes'].value)">Pesquisar</button>
                                  <span style="color: red" id="mensagem_erro"></span><br/>
                                  <span style="color: red" id="mensagem_folha"></span><br/>
                          </p>
                          
                  </form>
                  <form action="/FOLHADEPAGAMENTO/RECIBOFOLHA/FOLHACADASTRADOS.php" method="POST">
                      <div id="botaocancelar"> 
                          <p>
                             <input type="submit" id="btn" value=" Cancelar  " />
                          </p>
                      </div>    
                  </form>
              </div>    
          </div>
      </body>
      </html>
       
      ___________________________________________________
       
      <?php
      require "banco_de_dados.php";
      function obtemfolhamesanoPorId($codigoMes) {
          return consultaBanco("SELECT funcionario.nome, funcionario.cargo, cargo.salario, folhamesano.mesano FROM funcionario, cargo, folhamesano WHERE funcionario.cargo = cargo.descricao AND folhamesano.mesano='{$codigoMes}'");
      }
      /** 
       * Esse é o script que irá responder a requisição assincrona que criamos no Javascript
       *
       * Aqui eu espero que a query string codigoFuncionario esteja definida (Pode estar vazia, mas precisa estar definida, por exemplo, codigoCargo= ) por isso usei isset
       *
       *
       */
      if (isset($_GET['codigoMes'])) {
          $codigoMes = $_GET['codigoMes'];
          $nome = $_GET['nome'];
          /** Novamente encapsulando em métodos para adicionar contexto ao código */
          $folhamesano = obtemfolhamesanoPorId($codigoMes);
          if (empty($folhamesano)) {
              /** Como este é um código bem simples, usei o die para escrever o valor de saida
               * isso pq eu quero neste caso o texto seja escrito e a aplicação pare aqui
               * Eu poderia user um echo seguido de um return, mas para adicionar contexto
               * eu usei um método que deixe claro a intenção. Morre aqui e escreve o que eu estou pedindo.
               */
              die(json_encode([
                  'erro' => 404,
              ]));
          
          $tabela = '<table border="1" border: solid gray 5px;>';//abre table
                                                $tabela .='<thead>';//abre cabeçalho
                                                $tabela .= '<tr>';//abre uma linha
                                                $tabela .= '<th width="410px">Nome</th>';
                                                $tabela .= '<th width="300px">cargo</th>';
                                                $tabela .= '<th width="140px">salario</th>';
                                                $tabela .= '</tr>';//fecha linha
                                                $tabela .='</thead>'; //fecha cabeçalho
                                                $tabela .='<tbody>';//abre corpo da tabela
                                              $db = pg_connect("port=55432 dbname=folha user=fortesrh password=1234");
                                              
                                              $consulta=pg_query($db,"SELECT funcionario.nome, funcionario.cargo, cargo.salario from funcionario INNER JOIN cargo ON funcionario.cargo = cargo.descricao ORDER BY funcionario.nome"); 
                                              
                                              while ($linha = pg_fetch_array($consulta)) {//declaração da variável linha trazendo o resultado da query
                                                $tabela .= '<tr>'; // abre uma linha
                                                $tabela .= '<td>'.$linha['nome'].'</td>'; // coluna nome do funcionario
                                                $tabela .= '<td align="center">'.$linha['cargo'].'</td>'; // coluna cargo
                                                $tabela .= '<td align="center">'.$linha['salario'].'</td>'; // coluna salario
                                                $tabela .= '</tr>'; // fecha linha
                                                
                                              }
                                               $tabela .='</tbody>'; //fecha corpo
                                               $tabela .= '</table>';//fecha tabela
                                              echo $tabela; // imprime

          }
          /** Neste caso eu quero escrever e sair (Se nada acontecer depois, ele irá sair sozinho), poderia usar o die, sim. Mas nao é um ponto onde precisa morrer, apenas sair um texto */
          echo json_encode($folhamesano);
      } else {
          die(json_encode([
              'erro' => 404,
          ]));
                                                
      }
       
    • By Cleudiney T Brandão
      Pessoal alguém me dá uma ajuda com Mysql por favor.
      Tenho uma coluna em meu BD que precisaria o seguinte: 
      Ela não é obrigatória mas se preenchida não poderia ter outras ocorrências dela.
      É um campo que ao meu ver seria UNIQUE mas que aceitasse NULL.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.