JavaScript读取input输入值作密码生成字符数却返回NaN的问题求助

• HTML标签存在语法错误：<input>是无需独立闭合的自闭合表单元素，原代码给input加了无效的</input>闭合标签，同时将<button>的闭合标签错写为</input>，这类标签不匹配的问题会干扰DOM的正常解析。
• 取值逻辑存在本质错误：用户在输入框中敲入的文本，存储在input元素的value属性上，和innerHTML完全无关。innerHTML的作用是读取元素标签内部嵌套的HTML结构，input作为空元素本身没有嵌套内容，用innerHTML取值只会拿到空字符串，对空字符串执行parseInt()，返回值就是NaN，这是控制台输出异常的最直接原因。

修正后的HTML（修正标签错误，给input加数字输入类型优化输入体验）：

<input id="ccount" type="number" min="1">
<button id="go">go</button>

修正后的点击事件逻辑（替换错误的取值源，增加基础输入校验避免无效值影响后续逻辑）：

document.getElementById("go").addEventListener("click", function(){
  // 读取输入框的实际输入内容，去除首尾空白后转换为整数
  let ccount = parseInt(document.getElementById("ccount").value.trim());
  // 拦截无效输入
  if(Number.isNaN(ccount) || ccount < 1) {
    console.log("请输入大于0的有效整数作为密码长度");
    return;
  }
  console.log("成功获取密码长度：", ccount);
  // 此处可接入后续的密码生成逻辑
})

所有原生表单元素（input、textarea、select等）的用户输入内容，都统一通过value属性读取，不要混用针对普通容器DOM的文本读取方式（比如innerHTML、innerText），这是新手写表单交互时最容易踩的坑。

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