Function does not return values

Question

I’m beginner in JS and I’m having some problems with the function below. I am unable to return the array with this code. It is only returned when I remove "vet = []" where I empty it (something needed).

The function must generate and return a randomly generated vector with defined size from a selection made on the page where the user chooses 10, 100, 1000, 10000 or 100000 elements for the vector.

function Valeatorio(vet){
    let tamanho = document.getElementById("TVetor").value
    vet = [] //Removendo esse trecho o Array retorna
    if (tamanho > 0 && tamanho <= 10){
        console.time("Vetor Aleatório")
        for (let i = 0; i < tamanho; i++) {
                vet.push(parseInt(Math.random() * 100))
            } 
        console.timeEnd("Vetor Aleatório")
        console.log(vet)
        document.getElementById('VetorG').innerHTML = `<strong>Vetor gerado:</strong><br>${vet}`
    } else if(tamanho > 10){
        console.time("Vetor Aleatório")
        for (let i = 0; i < tamanho; i++) {
                vet.push(parseInt(Math.random() * 100))
            }
        console.timeEnd("Vetor Aleatório")
        console.log(vet)
        document.getElementById('VetorG').innerHTML = "<strong>Vetor gerado:</strong><br>Tamanho máximo permitido para visualização ultrapassado" 
    } 
    return [vet]
} 

Thank you!

Answer 1

I’ll try to recreate that function based on what you said in:

The function must generate and return a randomly generated vector with defined size from a selection made on the page where the user chooses 10, 100, 1000, 10000 or 100000 elements for the vector.

And I’ll also assume that arrays with more than 10 elements should not be shown to the user for reasons of presentation from what I’ve seen of their code.

Then I’ll break the problem in pieces:

1. Create a function that generates an array of N random numbers
2. Receive the array size of a user input
3. Present (or not) the new vector to the user

I will try to leave it well explained so that you understand the reasons for my decisions:

1. a function that generates an array of N random numbers

The function below generates an array of the size defined by the argument tamanho filled with random values between 0 and 99.

function gera_array(tamanho) {
    // Cria o novo array
    let novo_array = [];

    // Popula o array
    for (let i=0 ; i < tamanho ; i++) {
        novo_array.push(Math.floor(Math.random() * 100))
    }

    // Retorna o novo array populado
    return novo_array;
}

2. Receive the array size of a user input

To receive the value of a <input> user will just convert the attribute input.value for an integer and use it as parameter for the function gera_array.

// Guarda a referência para o elemento HTML
let input_tamanho = document.querySelector("#tamanho")
// Converte `input.value` para inteiro
let tamanho = parseInt(input_tamanho.value, 10)

Note that I created a variable input_tamanho keeping the reference to the HTML element. I did this because searching the DOM tree is computationally expensive for the browser, but as I saved your reference just use input_tamanho whenever I need it without the browser having to search for the element in the DOM again.

Note: The hint to save the reference to the HTML element is not required, but everyone should do this and understand why.

3. Presenting (or not presenting) the new vector to the user

I will create a function that reads the array and returns a string to be placed in HTML as feedback for the user.

function array_to_string(array) {
    if (array.length <= 10) {
        return "[" + array.join(", ") + "]"
    else {
        return "Array muito grande para visualizar"
    }

---

Now putting it all together we would have:

function gera_array(tamanho) {
    let novo_array = [];

    for (let i=0 ; i < tamanho ; i++) {
        novo_array.push(Math.floor(Math.random() * 100))
    }
    return novo_array;
}

function array_to_string(array) {
    if (array.length <= 10) {
        return "[" + array.join(", ") + "]"
    } else {
        return "Array muito grande para visualizar"
    }
}

// referências:
let input_tamanho = document.querySelector("#tamanho")
let btn = document.querySelector("#btn")
let resultado = document.querySelector("#resultado")

btn.addEventListener('click', function() {
    let tamanho = parseInt(input_tamanho.value, 10)
    let vetor = gera_array(tamanho)
    
    resultado.innerHTML = array_to_string(vetor)
})

<input id="tamanho" type="number" value="10">
<button id="btn">Criar array</button>

<p id="resultado">Resultado...</p>