onclick调用函数时如何同步修改外部DOM文本值

你的代码不生效核心是两个问题：

1. PasswordTest()函数逻辑写错了：你只是用document.getElementById("strength")选中了页面上的强度提示元素，但没有给这个元素赋值修改内容，只是在函数内部声明了一个叫strength的局部变量就返回了，根本没有改动页面上的文本。
2. HTML结构里多了一个没有匹配开头标签的</section>闭合标签，属于无效语法，虽然不影响这次按钮点击逻辑，但建议删掉避免后续出奇怪问题。

直接替换你写的PasswordTest()函数即可，修复后的代码：

function PasswordTest() {
  // 提前获取密码输入值，后续做强度检测直接用
  const pwd = document.getElementById("password").value;
  // 获取强度提示元素并修改文本
  document.getElementById("strength").textContent = "it worked";

  // 后续强度检测逻辑直接写在这里就行，比如根据密码长度、字符类型判断等级后替换提示文本
}

改完之后点击Check Strength按钮就能看到中间的大文本变成"it worked"，基础交互就跑通了。

• 你写的按钮onclick绑定、CSS样式、跳转按钮逻辑都没有问题，不需要改动
• CSS里的冗余代码不影响当前功能运行，等你把密码生成器和强度检测两个功能都写完之后再统一清理就行
• 后续获取用户输入的密码，直接读输入框的.value属性就能拿到实时输入的内容，不用重复绑定事件

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