Executando verificação de segurança...
-1
Higorcosta
1 min de leitura ·

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`)
    }
}
Carregando publicação patrocinada...
3
kht

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`);
    }
}
1
2
AdrianW

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 :)

1
gegeDev

Se isso funcionar, acho que ele pode só passar o 'defer' na tag script e assim ele só vai carregar após o html ser completamente carregado Ex: <script defer src="script.js"></script>

1