erro no codigo !!!
fala turma blz ? entao eu to tentando arrumar um bug neste codigo e nao sei o porque do motivo mas os alerts nao estao funcionando e quando eu abro o devtools do google ele fala q num nao esta definido alguem pode me ajudar pfv ??
HTML
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Analisador de numero</h1>
</header>
<section>
<div>numero entre (1 e 100)
<input type="number" name="fnum" id="fnum">
<input type="button" value="Adicionar" onclick="adicionar()"><br/><br/>
<select name="flista" id="flista" size="6"></select>
<input type="button" value="finalizar">
</div>
<div id="res">
</div>
</section>
<footer>
</footer>
</body>
</html>
JAVASCRIPT
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)){
alert(`tudo ok`)
}else{
alert(`erro`)
}
}
Como já disseram, o problema é que o JS está tentando buscar os elementos HTML antes deles serem carregados e parseados.
Uma alternativa é carregar isso só depois do HTML, usando DOMContentLoaded:
// declara as variáveis
let num, lista, res, valores = [];
// depois que o HTML é carregado, atribui as variáveis aos seus respectivos elementos
document.addEventListener('DOMContentLoaded', function () {
num = document.querySelector('input#fnum');
lista = document.querySelector('select#flista');
res = document.querySelector('div#res');
});
// definição das funções continua aqui
function isnumero(n) {
etc...
Segundo a documentação, o evento DOMContentLoaded dispara somente depois que o HTML foi completamente parseado, ou seja, ali já é garantido que os elementos existirão. Repare que valores eu posso inicializar antes, já que seu valor não depende do conteúdo da página.
E em vez de converter para número, pode usar valueAsNumber, que já retorna o valor como um número. Além disso, toda vez que vc tem algo assim:
if (condicao) {
return true;
} else {
return false;
}
Pode trocar por:
return condicao;
Ou seja, suas funções poderiam ser:
function isnumero(n) {
return n >= 1 && n <= 100;
}
function inlista(n, l) {
return l.indexOf(n) != -1;
}
function adicionar() {
if (isnumero(num.valueAsNumber) && !inlista(num.valueAsNumber, valores)) {
alert(`tudo ok`);
} else {
alert(`erro`);
}
}
E a segunda função também poderia ser:
function inlista(n, l) {
return l.includes(n);
}
Se bem que nesse caso, não sei nem se precisaria dessa função, poderia ser apenas:
function adicionar() {
if (isnumero(num.valueAsNumber) && !valores.includes(num.valueAsNumber)) {
alert(`tudo ok`);
} else {
alert(`erro`);
}
}
Então, esse script ta sendo chamado antes de existir o conteúdo, ou seja você quer pegar um input que ainda não existe. Experimenta colocar esse script antes da tag de fechamento do body, isso deve resolver
Para você ver por si, com o script ainda no head coloca um console log depois do num mostrando o num, e depois faz o mesmo mas com script agora antes da tag de fechamento do body :)