JS - Cannot read Property 'value' of null

Asked

Viewed 636 times

-1

Good night!

I’m studying JS and I came across a problem apparently common but I’m not able to solve.

I have the JS, where I create a variable for the user and password, and put in the end the "value" to get the value typed by the user. But always returns me the same error of "Cannot read Property 'value' of null".

I have tested putting the "value" in my IF, in the test function (even putting values, setInterval always brings as null).

I believe it is a problem concerning the page loading order, but I do not know how to solve the problem

inserir a descrição da imagem aqui

var button = document.querySelector("#logar");
var user = document.getElementById("#usuario").value;
var senha = document.getElementById("#senha").value;

button.onclick = function confirmaLiberacao() {
	if (validarUser(user,senha) == true) {
		window.open('liberado.html');
	} else 
		window.open('negado.html');
};

function teste() {
	console.log(user,senha); 
};

setInterval(teste,3000);
<!DOCTYPE html>
<html>
<head>
	<title>Teste</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style/style.css">
	<link href="https://fonts.googleapis.com/css?family=Inter|Roboto+Condensed&display=swap" rel="stylesheet">
</head>
<body>

	<header></header>

	<main>
		<section class="login">
			<h2>Faça o login ou cadastra-se</h2>
			<form action="/">
				<input type="text" id="usuario" autocomplete="name" placeholder="Usuário ou e-mail" required="required">
				<input type="password" autocomplete="current-password" id="senha" placeholder="Senha" required="required">
				<button class="botao" id="logar">Login</button>
				<button class="botao" id="cadastrar">Cadastrar</button>
			</form>
		</section>
	</main>
	<footer></footer>
	<script type="text/javascript" src="../Model/model.js"></script>
	<script type="text/javascript" src="../Controller/controller.js" aynsc></script>
</body>
</html>

javascript html
  • 2

    On the lines var user = document.getElementById("#usuario").value; and var senha = document.getElementById("#senha").value; withdraw the # parameters. Or if you want to keep the # change the method getElementById() for querySelector().

1 answer

3


The problem is time to take the element by ID. The program is not finding any ID with the name "#user" or "#password". As he did not find, he returned null. And since null has no function or attributes, the program broke when trying to call value of null.

You did right on the first line:

var button = document.querySelector("#logar");

But in the others, it did something redundant, because # already means ID, so the function getElementById just needs the name without the wire(#).

Would look like this:

var button = document.getElementById('logar');    
var user = document.getElementById('usuario').value;
var senha = document.getElementById('senha').value;

In this case he says, I want to find the ID by name user.

Already with the querySelector, you need to inform its type in the form of selectors. The ID selector, as seen earlier, is the # (cowling).

Would look this way:

var button = document.querySelector('#logar');    
var user = document.querySelector('#usuario').value;
var senha = document.querySelector('#senha').value;

Good studies!

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.