Generating random values form an array-CodePudding

I've been learning JavaScript for only one week so please be gentle! Tried searching for an answer but no luck.

I am writing a names generator and I want the user to click on a button "girlButton" to see a random girl name, same with boys. The problem is that it is generating one name for each button and to see another name, I need to refresh the page. I want to be able to smash the buttons and see a different name every time. I am pretty sure it's something basic, but I am stuck so please could you help? :) I am not pasting Arrays because they are pretty long. Thanks!

const girlsNamesArray = girlsNames.split(' ');
console.log(girlsNamesArray);

const boysNamesArray = boysNames.split(' ');
console.log(boysNamesArray);

let randomGirl = girlsNamesArray[Math.floor(Math.random() * girlsNamesArray.length)];
const girlButton = document.querySelector('.names__button--girl');

let randomBoy = boysNamesArray[Math.floor(Math.random() * boysNamesArray.length)];
const boyButton = document.querySelector('.names__button--boy');

let proposedName = document.querySelector('.names__idea');

girlButton.addEventListener('click', e => proposedName.innerText = `Nazwij córkę ${randomGirl.slice(0, -1)}`);

boyButton.addEventListener('click', e => proposedName.innerText = `Nazwij syna ${randomBoy.slice(0, -1)}`);

I want to be able to hit buttons multiple times and see different values from the array.

CodePudding user response：

Please try with following code block

        const girlsNamesArray = girlsNames.split(' ');
        console.log(girlsNamesArray);
        const boysNamesArray = boysNames.split(' ');
        console.log(boysNamesArray);

        const girlButton = document.querySelector('.names__button--girl');
        const boyButton = document.querySelector('.names__button--boy');

        let proposedName = document.querySelector('.names__idea');

        girlButton.addEventListener('click', e => {
            const string = girlsNamesArray[Math.floor(Math.random() * girlsNamesArray.length)];
            proposedName.innerText = `Nazwij córkę ${string}`
        });

        boyButton.addEventListener('click', e => {
            const string = boysNamesArray[Math.floor(Math.random() * boysNamesArray.length)];
            proposedName.innerText = `Nazwij syna ${string}`
        });

Here you have to write the logic of random inside the event binding.

CodePudding user response：

When a button is clicked, all it does right now is set the innerText of the proposedName element. It doesn't run the random number generator again. So you need to group the code to re-run it:

let girlsNames = "gloriax deborahx fayex"
let boysNames = "jackx petex stefanx"

const girlsNamesArray = girlsNames.split(' ');
console.log(girlsNamesArray);

const boysNamesArray = boysNames.split(' ');
console.log(boysNamesArray);

let randomGirl;
const girlButton = document.querySelector('.names__button--girl');

let randomBoy;
const boyButton = document.querySelector('.names__button--boy');

let proposedName = document.querySelector('.names__idea');

function selectNewNames() {
  randomBoy = boysNamesArray[Math.floor(Math.random() * boysNamesArray.length)];
  randomGirl = girlsNamesArray[Math.floor(Math.random() * girlsNamesArray.length)];
}

girlButton.addEventListener('click', e => {selectNewNames(); proposedName.innerText = `Nazwij córkę ${randomGirl.slice(0, -1)}`});

boyButton.addEventListener('click', e => {selectNewNames(); proposedName.innerText = `Nazwij syna ${randomBoy.slice(0, -1)}`});

<button type="button" >New girl</button>
<button type="button" >New boy</button>
<h2 ></h2>

CodePudding user response：

Firstly all the best for your journey.To achieve this, you can move the logic for generating random names inside the event listeners so that every time the button is clicked, a new random name is generated .The code for the same will be something like this.

const girlButton = document.querySelector('.names__button--girl');
const boyButton = document.querySelector('.names__button--boy');
const randomIndex = (arr) = >{
  return Math.floor(Math.random() * arr.length);
}

girlButton.addEventListener('click', e = >{
  let randomGirl = girlsNamesArray[randomIndex(girlsNamesArray)];
  proposedName.innerText = `Nazwij córkę$ {
    randomGirl.slice(0, -1)
  }`;
});

boyButton.addEventListener('click', e = >{
  let randomBoy = boysNamesArray[randomIndex(boysNamesArray)];
  proposedName.innerText = `Nazwij syna $ {
    randomBoy.slice(0, -1)
  }`;
});