Dynamic table with data coming from an input - js

Question

Look, guys, all right? I created a function that prints the prime numbers according to the value entered by the user in the input. I’m having a hard time accessing this number so that the function works and returns an array and imrprir this array in a dynamic table. I’m still starting the study, someone can give me a hand?

Follows the code:

<div class="card border-info container my-4 p-5 col-sm-4">
            <form class="text-center p-5" action="#!">
                <p class="h4 mb-4">Projeto - Números Primos</p>
                    <div class="col">
                        <input type="text" id="numerocalculo" class="form-control" name="numerocalculo" placeholder="Insira um número aqui" onblur="desafioPrimos(this);">
                        <input class="btn btn-outline-primary waves-effect btn-sm my-4 btn-block" type="button" value="Enviar" onclick="geradorTabela()">
                    </div>
</form>
        </div>

        <div class="card border-info mb-3 container p-5 text-center col-sm-4" id="divTabela"></div>

        <script type="text/javascript">
            /* FUNÇÃO NÚMEROS PRIMOS */

                var numero = document.getElementById('numerocalculo').value;
                var primos = [];

            function desafioPrimos() {
                numero = parseInt(numero);
                numerosPrimos:
                    for (var x = 2; x <= numero; x++) {
                        for (var y = 2; y < x; y++) {
                            if (x % y === 0)
                            continue numerosPrimos;
                        };
                    primos.push(x);
                    };
                };                              


            /* FUNÇÃO GERADOR DE TABELA */
            function geradorTabela() {
                
                var primos = new Array();
                primos.push([desafioPrimos()]);


                var table = document.createElement("TABLE");
                table.border = "0";
                var columnCount = primos[0].length;

                var row = table.insertRow(-1);
                for (var i = 0; i < columnCount; i++) {
                    var headerCell = document.createElement("TH");
                    headerCell.innerHTML = primos[0][i];
                    row.appendChild(headerCell);
                }

                //Dados.
                for (var i = 1; i < primos.length; i++) {
                    row = table.insertRow(-1);
                    for (var j = 0; j < columnCount; j++) {
                        var cell = row.insertCell(-1);
                        cell.innerHTML = primos[i][j];
                    }
                }

                var divTabela = document.getElementById("divTabela");
                divTabela.innerHTML = "";
                divTabela.appendChild(table);
            }
        </script>

Answer 1

I can indicate your error when trying to access the input value.

I already say that there are other problems in the code, and only this correction will not make it work, but as to the question, here is the explanation.

At the beginning of your code, you are searching for the input value numerocalculo with the following code line

var numero = document.getElementById('numerocalculo').value;

value is a property of the type string, which is passed by value, not by reference. This means that if the input value is changed, this will not reflect on your variable numero, numero will still represent the same value as when it was initialized, this value in turn is what its input contained when the page was loaded: an empty string

To take the numerical value of numerocalculo at the time when the function desafioPrimos is executed, you should initialize this variable within the function:

function desafioPrimos() {
    var numero = parseInt(document.getElementById('numerocalculo').value);
    var primos = [];

    // código para popular o array primos aqui

    return primos;
}

It’s also possible that the input value is not a valid numeric value, so remember to treat this possibility.