Personal Project: html text not updating with click event function call

This is a password generator I’m trying to build. I’ve ran into an issue that I don’t know how to solve.

I want to press a button, and have new html text appear based on the function that’s called during the click event.

In the console, I can see the button press works, and the function works, but the text isn’t updated in the displayed html.

Here’s the code:

// arrays of elements chosen to be used by the password generator

let animalsArr = [duck, cat, mouse, elephant, bird];

let furnitureArr = [chair, dresser, table, door, desk];

let structuresArr = [house, church, tower, bridge, road];

let clothesArr = [shirt, shorts, robe, sweater, pants];

let specialArr = [!, ?, &, #, $, %];

// choose a random element from the animals array

let animalsRand = function () {

let animalEl = animalsArr[Math.floor(Math.random() * animalsArr.length)];

console.log(animalEl);

return animalEl;

};

// choose a random element from the furniture array

let furnitureRand = function () {

let furnitureEl =

furnitureArr[Math.floor(Math.random() * furnitureArr.length)];

console.log(furnitureEl);

return furnitureEl;

};

// choose a random elements from the structures array

let structuresRand = function () {

let structuresEl =

structuresArr[Math.floor(Math.random() * structuresArr.length)];

console.log(structuresEl);

return structuresEl;

};

// choose a random element from the clothes array

let clothesRand = function () {

let clothesEl = clothesArr[Math.floor(Math.random() * clothesArr.length)];

console.log(clothesEl);

return clothesEl;

};

// choose a random element from the special array

let specialRand = function () {

let specialEl = specialArr[Math.floor(Math.random() * specialArr.length)];

console.log(specialEl);

return specialEl;

};

// creates a random number either 2, 3, or 4 digits long

let numRand = function () {

let passNum = Math.floor(Math.random() * 100000000);

console.log(passNum);

let passNum4 = passNum.toString().substring(0, 4);

let passNum3 = passNum.toString().substring(0, 3);

let passNum2 = passNum.toString().substring(0, 2);

console.log(passNum4, passNum3, passNum2);

return passNum3;

};

// scrambles the password to give a new password

let randomizer = function () {

console.log(‘randomizer called’);

animalsRand();

furnitureRand();

structuresRand();

clothesRand();

numRand();

specialRand();

};

//full base password array

let fullPass = randomizer();

// button press to display generated password

document.querySelector(’.newPass’).addEventListener(‘click’, randomizer);

// where generated password shows

document.querySelector(’.passDispArea’).textContent = fullPass;

Is that meant to be a function call? If so, what is returned?

hi yes, I didnt add the () before pasting this. WIll fix that now.

That function runs the random element chooser from all the arrays, and I wish to display that in the text display area.

This is what’s returned to the console when I press the button to call the randomizer function:

randomizer called
bird
desk
church
shirt
6503273
6503 650 65
?

when I press the button, I get another set of random data from the arrays along with random numbers.

Isn’t fullPass undefined since the randomizer function doesn’t return anything?

Aside

When we see repetition of code patterns it generally signals potential for modularization. Data, helper functions, control function.


const seedbank = {
  animals: [`duck`, `cat`, `mouse`, `elephant`, `bird`],
  furniture: [`chair`, `dresser`, `table`, `door`, `desk`],
  structures: [`house`, `church`, `tower`, `bridge`, `road`],
  clothes: [`shirt`, `shorts`, `robe`, `sweater`, `pants`],
  special: [`!`, `?`, `&`, `#`, `$`, `%`]
};
const seeds = []
for (let key in seedbank) {
    const s = seedbank[key]
    seeds.push(s[Math.floor(Math.random() * s.length)])
}
console.log(seeds)
[ 'duck', 'desk', 'road', 'sweater', '$' ]

awesome! Thanks for the help.

1 Like