Alguém me ajuda nesse código HTML5 E JAVASCRIPT

JavaScript

Delphi

HTML5

Firebird

JavaScript Web

26/08/2021



<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="adicionador.css">
<script src="adicionar.js"></script>
<title>Adicionando Números</title>
</head>
<body>
<header>
<h1>Analisador de Números</h1>
</header>

<main>
<div>
<p>Número (entre 1 & 100):
<input type="number" name="fnum" id="fnum" placeholder="DE 1 à 100">
<input type="button" value="adicionar" onclick="adicionar()">
<select name="flista" id="flista" size="10"></select>
<input class="veri" type="button" value="Verificar">
</p>
</div>

<div class="res">


</div>
</main>

</body>
</html>



let num = document.querySelector(''input#fnum'')
let lista = document.querySelector(''select#flista'')
let res = document.querySelector(''div#res'')
let valores = []

function isNumero(n) {
if (Number(n) >= 1 && Number(n) <= 100) {
return true
} else {
return false
}
}

function inLista(n, l) {
if (l.indexOf(Number(n) != -1)) {
return true
} else {
return false
}
}

function adicionar() {
if (isNumero(num.value) && !inLista(num.value, valores)) {
valores.push(Number(num.value))
let item = document.createElement(''option'')
item.text = `Valor ${num.value} adicionado.`
lista.appendChild(item)
} else {
window.alert(''Valor inválido ou já encontrado na lista'')
}

}

OBS:. Erro encontrado através do inspecionar: Uncaught TypeError: Cannot read property ''''value'''' of null
Vanderson Santos

Vanderson Santos

Curtidas 1

Respostas

Matheus Formigari

Matheus Formigari

26/08/2021



<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="adicionador.css">
<script src="adicionar.js"></script>
<title>Adicionando Números</title>
</head>
<body>
<header>
<h1>Analisador de Números</h1>
</header>

<main>
<div>
<p>Número (entre 1 & 100):
<input type="number" name="fnum" id="fnum" placeholder="DE 1 à 100">
<input type="button" value="adicionar" onclick="adicionar()">
<select name="flista" id="flista" size="10"></select>
<input class="veri" type="button" value="Verificar">
</p>
</div>

<div class="res">


</div>
</main>

</body>
</html>



let num = document.querySelector(''input#fnum'')
let lista = document.querySelector(''select#flista'')
let res = document.querySelector(''div#res'')
let valores = []

function isNumero(n) {
if (Number(n) >= 1 && Number(n) <= 100) {
return true
} else {
return false
}
}

function inLista(n, l) {
if (l.indexOf(Number(n) != -1)) {
return true
} else {
return false
}
}

function adicionar() {
if (isNumero(num.value) && !inLista(num.value, valores)) {
valores.push(Number(num.value))
let item = document.createElement(''option'')
item.text = `Valor ${num.value} adicionado.`
lista.appendChild(item)
} else {
window.alert(''Valor inválido ou já encontrado na lista'')
}

}

OBS:. Erro encontrado através do inspecionar: Uncaught TypeError: Cannot read property ''''value'''' of null


Olá Vanderson, também estou aprendendo javascript e acho que posso te ajudar.

Esse erro está acontecendo pois você está importando o arquivo adicionar.js dentro da tag head, isso significa que o js está sendo carregado antes dos elementos HTML.
Então as atribuições da DOM acabam não sendo efetuadas, visto que as id's que você referenciou com o querySelector teoricamente não existiam ainda.
O erro só aparece quando você tenta puxar o value das variáveis, pois elas estavam vazias, por isso o erro veio escrito desta forma " Cannot read property ''''value'''' of null ".
Então pra resolver você só precisa passar a linha 8 " <script src="adicionar.js"></script> " para dentro do body e esse erro deve sumir.

Passei por um problema muito parecido algumas semanas atrás e demorei dias para chegar nesta conclusão, aprendi que a tag script deve ficar no head, então demorei pra entender que o problema estava ali.

Você ainda pode utilizar a tag script no head se adicionar o atributo "defer" na importação do script, o javascript vai passar a carregar somente após o restante dos elementos do HTML. No caso é só manter essa linha no mesmo lugar e adicionar o atributo, assim: " <script src="adicionar.js" defer></script> ".

Espero que tenha ajudado, abraço!

Matheus Formigari
GOSTEI 0
POSTAR