JavaScript随机姓名生成器按钮重复点击不更新问题求助

你的问题核心是随机姓名只在页面加载时计算一次，后续点击按钮只是重复使用这个已生成的固定值。要实现每次点击都生成新姓名，只需把生成随机姓名的逻辑移到按钮的点击事件回调函数内部即可。

修改后的代码如下：

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');
const proposedName = document.querySelector('.names__idea');

girlButton.addEventListener('click', e => {
  // 每次点击时重新生成随机女名
  const randomGirl = girlsNamesArray[Math.floor(Math.random() * girlsNamesArray.length)];
  proposedName.innerText = `Nazwij córkę ${randomGirl.slice(0, -1)}`;
});

boyButton.addEventListener('click', e => {
  // 每次点击时重新生成随机男名
  const randomBoy = boysNamesArray[Math.floor(Math.random() * boysNamesArray.length)];
  proposedName.innerText = `Nazwij syna ${randomBoy.slice(0, -1)}`;
});

关键修改说明： #

• 将randomGirl和randomBoy的生成逻辑从全局作用域移到对应按钮的点击回调函数内，这样每次点击按钮都会重新执行随机数计算，得到全新的姓名。
• 变量声明改用const（因为每次点击都会创建新的变量，无需重复赋值），更符合JavaScript的编码规范。

修改完成后，每次点击按钮都会生成并显示新的随机姓名，无需刷新页面。

内容的提问来源于stack exchange，提问作者Małgorzata Kuźmierz