Uncaught TypeError: document.getElementById(...) is null #1874

odnanrefcg · 2020-08-12T11:44:09Z

odnanrefcg
Aug 12, 2020

Bom dia,

Estou fazendo um select e pegando descrição e preço dos produtos, carrego os dois em "spans" dentro de um "figcaption", abaixo o código:

  	valorItem = Number(valorItem);

	function decQtde() {
		numero--;
		setValue(numero);

}

	function incQtde() {
		numero++;
		setValue(numero);

}
function setValue(value) {
document.getElementById('qtde').value = value;
}

	function incValor(valor_maximo){
		valor += valorItem;
		setValor(valor);
	}
	function decValor(valor_minimo){
		valor -= valorItem;
		setValor(valor);
	}
	function setValor(valorTotal){
		document.getElementById('valorItens').value = valorTotal;
	}

	function abrirCarrinho(URL) {
		window.open(URL, 'janela', 'width=795, height=590, top=100, left=200, scrollbars=yes, status=no, toolbar=no, location=no, menubar=no, resizable=yes, fullscreen=no')

}
;
</script>

Saldo:
R$

Categorias

					$sqlCat = "select id_categoria_item as idCat, descricao_categoria_item as descCat from categoria_item order by idCat";

					$queryCat = mysqli_query($con, $sqlCat);

					while ($dadosCat = mysqli_fetch_array($queryCat)) {
						$descCategoria  = $dadosCat['descCat'];	
						$idCat = $dadosCat['idCat'];					

				?>
				<li><?php echo $descCategoria; ?>
					<ul>
						<?php
							$sqlItem = "select item_auxilio.descricao_item_auxilio as descItem, item_auxilio.unidade_item, unidade_medida.id_unidade_medida, unidade_medida.sigla_unidade_medida as unidadeSigla from item_auxilio, unidade_medida where item_auxilio.unidade_item = unidade_medida.id_unidade_medida and item_auxilio.id_categoria_item = '$idCat' and estoque_item > 0";

							$queryItem = mysqli_query($con, $sqlItem);

							while ($dadosItem = mysqli_fetch_array($queryItem)) {
								$descItem  = $dadosItem['descItem'];
					
						?>
						<li><?php echo $descItem; ?></li>
						<?php } ?>
					</ul>
				</li>
				<?php } ?>
			</ul>
		</nav>
	</div>		

	<div class="vitrine col-sm-9">
		<ul>
			<?php
				$cn = new conexaoMySql();
				$con = $cn->conectar();

				$sql = "select item_auxilio.descricao_item_auxilio as descItem, item_auxilio.unidade_item, unidade_medida.id_unidade_medida, unidade_medida.sigla_unidade_medida as unidadeSigla, item_auxilio.valor_item as valorItem, item_auxilio.imagem as imagemItem from item_auxilio, unidade_medida where item_auxilio.unidade_item = unidade_medida.id_unidade_medida and estoque_item > 0";

				$query = mysqli_query($con, $sql);

				while ($dados = mysqli_fetch_array($query)) {
					$descProduto    = $dados['descItem'];
					$unidadeProduto =  $dados['unidadeSigla'];
					$precoProduto   =  $dados['valorItem'];
					$imagemProduto  = $dados['imagemItem'];	
			?>
				<li>
					<figure>
						<img src="<?php echo '../'.$imagemProduto ?>">
						<figcaption>
							<span id="descProduto"><?php echo $descProduto." (".$unidadeProduto.")"; ?></span>
							<br>
							<span id="precoProd"><?php echo $precoProduto; ?></span>
						</figcaption>
					</figure>
					<input type="button" id="mais" value="+" onclick="incQtde(); incValor(150);">
					<input type="button" id="menos" value="-" onclick="decQtde(); decValor(0);">
				</li>
			<?php } ?>
		</ul>
	</div>

...Porém não está funcionando, e o erro é "Uncaught TypeError: document.getElementById(...) is null" na linha "valorItem = document.getElementById('precoProd').textContent;"

Se puderem me ajudar, agradeço.

evelew · 2020-08-12T17:56:04Z

evelew
Aug 12, 2020

Acho que da pra checar 2 coisas:

O elemento que vc quer pegar tem o id "precoProd"?
Quando vc roda esse script o DOM já está carregado?

0 replies

dominguetigs · 2020-08-12T18:02:30Z

dominguetigs
Aug 12, 2020

Acho válido a dica de @evelew passou. Só complementando... o erro se dá pelo fato de que você está tentando fazer document.getElementById('precoProd').textContent e parece que o valor document.getElementById('precoProd') está nulo, ou porque não tem esse id setado precoProd ou porque a página ainda não foi carregada completamente e por isso no fim das contas não é possível pegar o textContent.

0 replies

ojvribeiro · 2020-08-12T19:55:25Z

ojvribeiro
Aug 12, 2020

Por favor, edite seu post e coloque seu HTML também para podermos ajudá-lo melhor.

Ao colar um código aqui, utilize essa sintaxe:

Substitua "html" pela linguagem que quiser.

Complementando ainda mais as respostas do @evelew e do @dominguetigs ...

Coloque a seu <script></script> após seus elementos e antes de </body>.

Fiz alguns ajustes e comentei alguns pontos que você pode aplicar:

<html>
<body>
<!-- Seu HTML aqui -->

<script>
// Inicialize sua variável com let ou var
let valor = 0;

let valorItem = document.getElementById('precoProd').textContent;

// Use a função 'Number' para converter a string para um número
valorItem = Number(valorItem);

function incValor() {
  valor = valor + valorItem; // Você pode usar também: valor += valorItem;
  setValor(valor);
}

function decValor() {
  valor = valor - valorItem; // Você pode usar também: valor -= valorItem;
  setValor(valor);
}

function setValor(valorTotal) {
  document.getElementById('valorItens').value = valorTotal;
}
</script>
</body>
</html>

0 replies

odnanrefcg · 2020-08-13T11:13:58Z

odnanrefcg
Aug 13, 2020
Author

Coloquei todo o código. Acho que ficou meio bugado. Sei que o ideal seria separar os html, js, php, etc, mas é projeto bem pequeno.

Obrigado

0 replies

ojvribeiro · 2020-08-13T12:45:19Z

ojvribeiro
Aug 13, 2020

Como seu código é em PHP, você pode postar assim pra ficar direitinho:

Assim ele vai receber o PHP, o HTML, CSS e JS de boa. 😉

0 replies

odnanrefcg · 2020-08-13T18:23:39Z

odnanrefcg
Aug 13, 2020
Author

Já tentei de tudo. Troquei os nomes das variáveis, usei input ao invés de span, usei let, var....
Não teve jeito.

0 replies

odnanrefcg · 2020-08-13T19:21:22Z

odnanrefcg
Aug 13, 2020
Author

Coloquei assim:

window.addEventListener('load', () => {
numero = 0;
var valor = 0;
var valItem = document.getElementById('precoProd').value;

  	valItem = Number(valItem);

	function decQtde() {
		numero--;
		setValue(numero);
	}

	function incQtde() {
		numero++;
		setValue(numero);
	}
	function setValue(value) {
		document.getElementById('qtde').value = value;
	}
			
	function incValor(valor_maximo){
		valor += valItem;
		setValor(valor);
	}
	function decValor(valor_minimo){
		valor -= valItem;
		setValor(valor);
	}
	function setValor(valorTotal){
		document.getElementById('valorItens').value = valorTotal;
	}

	function abrirCarrinho(URL) {
		window.open(URL, 'janela', 'width=795, height=590, top=100, left=200, scrollbars=yes, status=no, toolbar=no,     location=no, menubar=no, resizable=yes, fullscreen=no');
	} });

Não aconteceu absolutamente nada. Nem no Debug.

0 replies

glauberm · 2020-08-14T14:12:26Z

glauberm
Aug 14, 2020

@odnanrefcg Sei que você falou que não quis dividir melhor os conceitos porque é um projeto pequeno, mas é uma pressa que te custa mais tempo, justamente por erros como esse. Tentei reproduzir o erro aqui, mas ele não aconteceu. Tive que omitir algumas partes (cadê os elementos de id valorItens e qtde?) então imagino que seja nelas que esteja rolando algum erro. Divide melhor os conceitos, faz um repo aqui no GitHub com os arquivos e mostra pra gente que fica mais fácil te ajudar.

0 replies

odnanrefcg · 2020-08-14T14:22:38Z

odnanrefcg
Aug 14, 2020
Author

Bom dia pessoal!

Agradeço a atenção de todos.
Anexei meu arquivo neste post.

Obrigado!

home.zip

0 replies

ojvribeiro · 2020-08-14T17:10:10Z

ojvribeiro
Aug 14, 2020

Pelo que vi no seu código, o JS ainda estava em cima no seu HTML. Movi ele pro final e fiz umas observações:

<?php include("classes/conexaoMySql.class.php"); ?>
<!doctype html>
<html>

<head>
  <meta charset="utf-8" lang="pt-br">
  <title>Mercado Solidário Bairro da Juventude</title>

  <!-- Desde o HTML5, o type não é necessário na tag 'link' e 'style' para CSS -->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>


<body>
  <div id="cabecalho-meio" class="row">
    <div id="cabecalho-logo" class="bg-light col-sm-3">
      <a href="http://www.bairrodajuventude.org.br/" target="_blank"><img src="imagens/logoBairro.png"></a>
    </div>

    <div id="cabecalho-frase" class="bg-success col-sm-9">
      <!-- A Definir -->
    </div>
  </div>

  <div id="cabecalho-inferior" class="row">
    <div class="busca col-sm-3">
      <form action="">
        <label>
          <input type="text" name="pesquisa" id="pesquisa" placeholder="Buscar...">
        </label>
      </form>
    </div>

    <div class="carrinho col-sm-9">
      <ul>
        <li>Saldo:</li>


        <li>
          <script>
          // Essa função precisava ser colocada aqui pois é chamada diretamente da tag 'a' 
          function abrirCarrinho(URL) {
            window.open(URL, 'janela',
              'width=795, height=590, top=100, left=200, scrollbars=yes, status=no, toolbar=no, location=no, menubar=no, resizable=yes, fullscreen=no'
            );
          }
          </script>

          <a href="javascript:abrirCarrinho('carrinho.php')"><img src="imagens/carrinho32.png"></a> <input type="text"
            name="" id="qtde">
        </li>

        <li>R$ <input type="text" id="valorItens"></li>
      </ul>
    </div>
  </div>

  <div class="row container-fluid">
    <div class="categorias col-sm-3">
      <h2 class="">Meus Itens</h2>

      <hr>

      <ul>
        <li></li>
      </ul>
    </div>

    <div class="vitrine col-sm-9">
      <ul>
        <?php
          $cn = new conexaoMySql();
          $con = $cn->conectar();

          $sql = 
          "SELECT item_auxilio.id_item_auxilio 
          AS idItem, item_auxilio.descricao_item_auxilio 
          AS descItem, item_auxilio.unidade_item, unidade_medida.id_unidade_medida, unidade_medida.sigla_unidade_medida 
          AS unidadeSigla, item_auxilio.valor_item 
          AS valorItem, item_auxilio.imagem 
          AS imagemItem 
          FROM item_auxilio, unidade_medida 
          WHERE item_auxilio.unidade_item = unidade_medida.id_unidade_medida 
          AND estoque_item > estoque_margem 
          AND imagem <> ''"; // Apesar de opcional, é uma boa prática colocar as palavras reservadas em maiúsculas

          $query = mysqli_query($con, $sql);
          
          while ($dados = mysqli_fetch_array($query)) : // Em vez de abrir a chave, coloquei : para fechar com 'endwhile'
          $idItem = $dados['idItem'];
          $descProduto = $dados['descItem'];
          $unidadeProduto = $dados['unidadeSigla'];
          $precoProduto = $dados['valorItem'];
          $imagemProduto = $dados['imagemItem'];	
        ?>
        <li>
          <figure>
            <!-- Você pode usar '?=' no lugar de '?php echo' -->
            <img src="<?= '../'. $imagemProduto; ?>" alt="Imagem do Produto" />

            <figcaption>
              <input type="hidden" id="idItem" value="<?= $idItem; ?>" />

              <span id="descProduto">
                <?= $descProduto ." (". $unidadeProduto .")"; ?>
              </span>

              <br>

              <span id="precoProd">
                <?= $precoProduto; ?>
              </span>
            </figcaption>
          </figure>

          <input type="image" src="imagens/mais24.png" id="mais" alt="+" onclick="incQtde(); incValor(150);" />
          <input type="image" src="imagens/menos24.png" id="menos" alt="-" onclick="decQtde(); decValor(0);" />
        </li>
        <?php endwhile; // Essa é uma boa prática ao misturar PHP com HTML ?>
      </ul>
    </div>
  </div>


  <script>
  var numero = 0;
  var valor = 0;
  var valItem = document.getElementById('precoProd').textContent;

  valItem = Number(valItem);

  function decQtde() {
    numero--;
    setValue(numero);
  }

  function incQtde() {
    numero++;
    setValue(numero);
  }

  function setValue(value) {
    document.getElementById('qtde').value = value;
  }

  function incValor(valor_maximo) {
    valor += valItem;
    setValor(valor);
  }

  function decValor(valor_minimo) {
    valor -= valItem;
    setValor(valor);
  }

  function setValor(valorTotal) {
    document.getElementById('valorItens').value = valorTotal;
  }
  </script>
</body>

</html>

0 replies

odnanrefcg · 2020-08-14T18:31:40Z

odnanrefcg
Aug 14, 2020
Author

Obrigado Victor,

Está somando os valores, porém, ele pega o valor apenas do primeiro produto, sempre.

Obrigado

0 replies

ojvribeiro · 2020-08-17T13:26:56Z

ojvribeiro
Aug 17, 2020

Desculpe a demora, eu tô bem atarefado esses dias.

Está somando os valores, porém, ele pega o valor apenas do primeiro produto, sempre.

Isso acontece porque você tava pegando o valor do produto com essa linha:

var valItem = document.getElementById('precoProd').textContent;

Como tava selecionando um elemento pelo ID, apenas o primeiro elemento seria selecionado. Pra resolver isso, eu atribuí um ID diferente pra cada elemento, baseado no ID dele no banco de dados. O código ficou assim:

<?php include("classes/conexaoMySql.class.php"); ?>
<!doctype html>
<html>

<head>
  <meta charset="utf-8" lang="pt-br">
  <title>Mercado Solidário Bairro da Juventude</title>

  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>


<body>
  <div id="cabecalho-meio" class="row">
    <div id="cabecalho-logo" class="bg-light col-sm-3">
      <a href="http://www.bairrodajuventude.org.br/" target="_blank"><img src="imagens/logoBairro.png"></a>
    </div>

    <div id="cabecalho-frase" class="bg-success col-sm-9">
      <!-- A Definir -->
    </div>
  </div>

  <div id="cabecalho-inferior" class="row">
    <div class="busca col-sm-3">
      <form action="">
        <label>
          <input type="text" name="pesquisa" id="pesquisa" placeholder="Buscar...">
        </label>
      </form>
    </div>

    <div class="carrinho col-sm-9">
      <ul>
        <li>Saldo:</li>


        <li>
          <script>
          // Essa função precisava ser colocada aqui pois é chamada diretamente da tag 'a' 
          function abrirCarrinho(URL) {
            window.open(URL, 'janela',
              'width=795, height=590, top=100, left=200, scrollbars=yes, status=no, toolbar=no, location=no, menubar=no, resizable=yes, fullscreen=no'
            );
          }
          </script>

          <a href="javascript:abrirCarrinho('carrinho.php')"><img src="imagens/carrinho32.png"></a> <input type="text"
            name="" id="qtde">
        </li>

        <li>R$ <input type="text" id="valorItens"></li>
      </ul>
    </div>
  </div>

  <div class="row container-fluid">
    <div class="categorias col-sm-3">
      <h2 class="">Meus Itens</h2>

      <hr>

      <ul>
        <li></li>
      </ul>
    </div>

    <div class="vitrine col-sm-9">
      <ul>
        <?php
          $cn = new conexaoMySql();
          $con = $cn->conectar();

          $sql = 
          "SELECT item_auxilio.id_item_auxilio 
          AS idItem, item_auxilio.descricao_item_auxilio 
          AS descItem, item_auxilio.unidade_item, unidade_medida.id_unidade_medida, unidade_medida.sigla_unidade_medida 
          AS unidadeSigla, item_auxilio.valor_item 
          AS valorItem, item_auxilio.imagem 
          AS imagemItem 
          FROM item_auxilio, unidade_medida 
          WHERE item_auxilio.unidade_item = unidade_medida.id_unidade_medida 
          AND estoque_item > estoque_margem 
          AND imagem <> ''";

          $query = mysqli_query($con, $sql);
          
          while ($dados = mysqli_fetch_array($query)) : 
          $idItem = $dados['idItem'];
          $descProduto = $dados['descItem'];
          $unidadeProduto = $dados['unidadeSigla'];
          $precoProduto = $dados['valorItem'];
          $imagemProduto = $dados['imagemItem'];	
        ?>
        <li>
          <figure>
            <img src="<?= '../'. $imagemProduto; ?>" alt="Imagem do Produto" />

            <figcaption>
              <input type="hidden" id="idItem" value="<?= $idItem; ?>" />

              <span id="descProduto">
                <?= $descProduto ." (". $unidadeProduto .")"; ?>
              </span>

              <br>

              <!-- Adicionei o id do produto ao id do preço para diferenciar cada item -->
              <span id="precoProd-<?= $idItem; ?>">
                <?= $precoProduto; ?>
              </span>
            </figcaption>
          </figure>

          <!-- O ID vai ser enviado na chamada da função incValor e da decValor -->
          <input type="image" src="imagens/mais24.png" id="mais" alt="+"
            onclick="incQtde(); incValor('<?= $idItem; ?>', 150);" />
          <input type="image" src="imagens/menos24.png" id="menos" alt="-"
            onclick="decQtde(); decValor('<?= $idItem; ?>', 0);" />
        </li>
        <?php endwhile; ?>
      </ul>
    </div>
  </div>


  <script>
  var numero = 0;
  var valor = 0;
  var valItem; // Declarei a variável sem atribuir ainda um valor a ela

  // Criei uma função para retornar o preço do produto dependo de sua id
  function getPrecoItem(id) {
    // Caso não esteja familiarizado com template literals, recomendo esse artigo: https://nipher.io/es6-template-literals/ 
    valItem = document.getElementsById(`precoProd-${id}`).textContent;

    // Transformar em número para podermos fazer operações matemáticas
    valItem = Number(valItem);

    return valItem;
  }

  function decQtde() {
    numero--;
    setQuantidade(numero);
  }

  function incQtde() {
    numero++;
    setQuantidade(numero);
  }

  // Alterei o nome da funcao para 'setQuantidade'
  function setQuantidade(value) {
    document.getElementById('qtde').value = value;
  }

  // Adicionei uma lógica para o valor máximo e mínimo
  function incValor(id, valor_maximo) { // Adicionei o parametro id
    if (valor > valor_maximo) {
      valor += getPrecoItem(id); // Iterando com getPrecoItem, você deve conseguir somar o preço de cada produto11
      setValorTotal(valor);
    } else {
      alert('Valor máximo atingido');
    }
  }

  function decValor(id, valor_minimo) {
    if (valor < valor_minimo) {
      valor -= getPrecoItem(id);
      setValorTotal(valor);
    } else {
      alert('Valor mínimo atingido');
    }
  }

  function setValorTotal(valorTotal) {
    document.getElementById('valorItens').value = valorTotal;
  }
  </script>
</body>

</html>

Na medida que seu código vai ficando grande, recomendo começar a dividir em arquivos.

0 replies

odnanrefcg · 2020-08-17T16:59:10Z

odnanrefcg
Aug 17, 2020
Author

Boa tarde Victor,

Primeiro gostaria de agradecer o tempo dedicado para me auxiliar.
Separei meu JS do HTML. A contagem está funcionando mas o valor (incValor, decValor) não. Aquele "precoProd-${id}" está correto? Ficaria assim: 5.99-43...

Ajustei meu código como sugeriste:

var numero = 0;
var valItem;
var valor = 0;

function getPrecoItem(id) {
valItem = document.getElementById('precoProd-${id}').textContent;

valItem = Number(valItem);

alert(valItem);

return valItem;

}

function decQtde() {
numero--;
setQtde(numero);
}

function incQtde() {
numero++;
setQtde(numero);
}
function setQtde(value) {
document.getElementById('qtde').value = value;
}

function incValor(valor_maximo, id){
if (valor < valor_maximo) {
valor += getPrecoItem(id);

	setValorTotal(valor);
} else {
	alert('Valor máximo atingido!');
}

}
function decValor(valor_minimo, id){
if (valor <= valor_minimo) {

	valor = 0;	
	setValorTotal(valor);
} else {
	valor -= getPrecoItem(id);
}

}
function setValorTotal(valorTotal){
document.getElementById('valorItens').value = valorTotal;
}

Obrigado mais uma vez.

0 replies

ojvribeiro · 2020-08-17T17:44:58Z

ojvribeiro
Aug 17, 2020

Olá, Fernando.

Eu cometi um erro nos operadores das funções de incremento e decremento. Fiz uma correção nessas funções, veja se funciona agora:

function incValor(id, valor_maximo) {
    if (valor <= valor_maximo) { // Mudei o operador para <= (menor ou igual)
      valor += getPrecoItem(id);
      setValorTotal(valor);
    } else {
      alert('Valor máximo atingido');
    }
  }

  function decValor(id, valor_minimo) {
    if (valor >= valor_minimo) { // Mudei o operador para >= (maior ou igual)
      valor -= getPrecoItem(id);
      setValorTotal(valor);
    } else {
      alert('Valor mínimo atingido');
    }
  }

Agora sobre seu outro ponto...

Aquele "precoProd-${id}" está correto? Ficaria assim: 5.99-43...

O precoProd-${id} é a ID do elemento no DOM. Por exemplo, se a ID do produto no seu banco de dados for 46, a ID no DOM ficará assim: precoProd-46.

Sobre seu código:

function getPrecoItem(id) {
valItem = document.getElementById('precoProd-${id}').textContent;

Quando se usa as Template Literals (que permite mesclar strings e variáveis), você deve utilizar crase (`) e não aspas. Ficaria assim:

document.getElementById(`precoProd-${id}`).textContent; // Repare que usei ` e não '

Caso não queira se aventurar ainda com as Template Literals, você pode normalmente concatenar (aí sim usar aspas):

document.getElementById('precoProd-' + id).textContent; // Usei ' aqui

0 replies

odnanrefcg · 2020-08-17T19:19:32Z

odnanrefcg
Aug 17, 2020
Author

Boa tarde Victor,

Muito obrigado pela ajuda. Estou estudando JS, mas ainda engatinhando. Está funcionando conforme eu previa. Só mais uma coisa:

Na parte lateral da página pretendo colocar os itens do carrinho, com suas respectivas quantidades, Minha dificuldade está em percorrer os elementos com um for ou while e adicionar, decrementar, incrementar ou retirar (quando quantidade for 0) um item qualquer.
Criei uma li com 4 inputs: idItemCompra = "hidden" - descItemCompra, undItemCompra e qtdeItemCompra como "text".

Se puderes me dar umas dicas, agradeço muito!

Obrigado.

0 replies

Uncaught TypeError: document.getElementById(...) is null #1874

Uh oh!

Uh oh!

Categorias

Replies: 15 comments

Uh oh!

Uh oh!

Uh oh!

Uh oh!

odnanrefcg Aug 13, 2020 Author

Uh oh!

Uh oh!

Uh oh!

odnanrefcg Aug 13, 2020 Author

Uh oh!

odnanrefcg Aug 13, 2020 Author

Uh oh!

Uh oh!

odnanrefcg Aug 14, 2020 Author

Uh oh!

Uh oh!

odnanrefcg Aug 14, 2020 Author

Uh oh!

Uh oh!

odnanrefcg Aug 17, 2020 Author

Uh oh!

Uh oh!

Uh oh!

odnanrefcg Aug 17, 2020 Author

odnanrefcg
Aug 13, 2020
Author

odnanrefcg
Aug 13, 2020
Author

odnanrefcg
Aug 13, 2020
Author

odnanrefcg
Aug 14, 2020
Author

odnanrefcg
Aug 14, 2020
Author

odnanrefcg
Aug 17, 2020
Author

odnanrefcg
Aug 17, 2020
Author