HTML+JS随机密码生成器点击submit后页面刷新结果丢失问题求助

问题原因 #

你的按钮放在<form>标签内部，<button>元素未明确指定type属性时，默认类型为submit，点击后会触发表单提交逻辑，浏览器默认会刷新当前页面，导致刚生成的密码结果被清空，和script标签放置位置无关。

解决方案 #

可任选以下任意一种方案修改即可解决：

• 方案1：给按钮明确指定为普通按钮类型，不会触发表单提交
  修改按钮代码为：

<button type="button" onclick="Password()">submit</button>

• 方案2：阻止按钮点击事件的默认提交行为
  修改按钮的onclick逻辑，增加return false：

<button onclick="Password(); return false;">submit</button>

• 方案3：直接禁用表单的提交行为
  给form标签增加onsubmit属性：

<form action="" onsubmit="return false">

• 方案4：移除外层多余的form标签
  你的功能不需要向服务端提交数据，完全可以删掉<form>和对应的</form>标签，从根源避免提交刷新问题。

额外优化建议 #

1. 你当前代码中随机数取值写死为Math.floor(Math.random() * 66)，如果后续调整可用字符集需要手动修改数值，建议改为动态取字符集长度，避免遗漏字符：

let rand_num = Math.floor(Math.random() * strings.length);

2. 建议把获取到的密码长度转成数字类型，增加容错逻辑，避免用户输入非数字内容时出现异常：

var passlen = parseInt(document.getElementById("passwordlen").value) || 8;

上面代码的作用是如果输入的长度无效，默认生成8位密码。

内容的提问来源于stack exchange，提问作者Jay Sardar