0

Olá, boa tarde.

Quero fazer uma tela que calcule uma tabuada especificada pelo usuário. O resultado eu quero que apareça em um select separando cada valor dentro de uma option. Para isso eu pensei no seguinte: o script, quando solicitado através de uma function, recupera o valor digitado pelo usuário e guarda em uma variável, cria um elemento option, limpa o campo da option já existente e a estrutura de repetição faz os calculados com o valor digitado pelo o usário e a cada volta ele adiciona uma option ao select e ao option ele adiciona o resultado. O browser apresenta o seguinte erro:

Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at submitar

Me desculpem qualquer coisa, já olhei várias o código e na minha cabeça ta certo, mas o browser insisti que ta errado.

function submitar() {
    var valor = Number(document.querySelector('input#num').value)
    var select = document.getElementById('#select')
    var res = 0

    var option = document.createElement('option')

    document.querySelector('option#resultado').innerHTML = ''

    for(var cont = 0; cont <= 10; cont++) {
        res = valor * cont
        select.appendChild(option)
        option.append(res)
        console.log(res)
    }
}
body {
    background: rgb(70,142, 236);
    font: normal 15pt arial;
}

header {
    color: white;
    text-align: center;
}

section {
    background: white;
    border-radius: 10px;
    padding: 15px;
    width: 500px;
    margin: auto;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.363);
}

p {
    display: inline;
}

div {
    padding: 8px;
}

footer {
    color: white;
    text-align: center;
    font-style: italic;
}
<!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>Tabuada</title>

   <script src="script/script.js"></script>
    <link rel="stylesheet" href="estilo/style.css">
</head>
<body>
    
    <header>
        <h1>Tabuada</h1>
    </header>
    <section>
        <div>
            <form>
                <fieldset>
                    <p>
                        <label>Inicio:</label>
                        <input type="number" name="num" id="num">
                    </p>
                        <input type="button" id="submit" 
                       onclick="submitar()" value="Gerar tabuada">
                </fieldset> 
            </form>
        </div>

        <div id="res">
            <p>
                <select size="10" style="width: 200px;" id="select">
                    <option id="resultado">Digite um número acima</option>
                </select>
            </p>
        </div>
    </section>
    <footer>
        <p>&copy; Cristian Bispo</p>
    </footer>

</body>
</html>

2

1 Resposta 1

-2

O erro esta acontecendo devido ao símbolo de sustenido em document.getElementById('#select'), e não existe nenhum elemento com id chamado #select, mas sim chamado select. Dessa forma, alterando para document.getElementById('select') o erro citado na questão será sanado.

Veja abaixo o exemplo sem o erro:

function submitar() {
    var valor = Number(document.querySelector('input#num').value)
    var select = document.getElementById('select')
    var res = 0

    var option = document.createElement('option')

    document.querySelector('option#resultado').innerHTML = ''

    for(var cont = 0; cont <= 10; cont++) {
        res = valor * cont
        select.appendChild(option)
        option.append(res)
        console.log(res)
    }
}
body {
    background: rgb(70,142, 236);
    font: normal 15pt arial;
}

header {
    color: white;
    text-align: center;
}

section {
    background: white;
    border-radius: 10px;
    padding: 15px;
    width: 500px;
    margin: auto;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.363);
}

p {
    display: inline;
}

div {
    padding: 8px;
}

footer {
    color: white;
    text-align: center;
    font-style: italic;
}
<!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>Tabuada</title>

   <script src="script/script.js"></script>
    <link rel="stylesheet" href="estilo/style.css">
</head>
<body>
    
    <header>
        <h1>Tabuada</h1>
    </header>
    <section>
        <div>
            <form>
                <fieldset>
                    <p>
                        <label>Inicio:</label>
                        <input type="number" name="num" id="num">
                    </p>
                        <input type="button" id="submit" 
                       onclick="submitar()" value="Gerar tabuada">
                </fieldset> 
            </form>
        </div>

        <div id="res">
            <p>
                <select size="10" style="width: 200px;" id="select">
                    <option id="resultado">Digite um número acima</option>
                </select>
            </p>
        </div>
    </section>
    <footer>
        <p>&copy; Cristian Bispo</p>
    </footer>

</body>
</html>

2
  • Realmente era esse o erro bobo, né, rsrs'. Será que teria como aproveitar aqui e me sanar mais uma dúvida? Os valores de resultado não estão aparecendo divido por option, aparentemente as options estão sendo sobrescrevidas, sabe me dizer qual o erro para ele não criar uma option nova a cada looping? 12/05/2022 às 17:31
  • Poderia explicar melhor sua dúvida. (obs: lembre de marcar a minha resposta e dar +1 também). 12/05/2022 às 18:02

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .