JavaScript实现输入框内容隔位字母大写后页面展示的问题排查

你的代码问题出在输入框值的获取时机错误：
你将输入框值的读取逻辑写在了全局作用域，这行代码会在JS文件加载完成、页面初次渲染时就执行，此时用户还未在输入框输入内容，后续点击按钮时也不会重新读取输入框的最新值，所以处理逻辑永远拿不到用户输入的内容，自然无法正常生成结果。

把输入框值的读取逻辑移到点击触发的tekstEndrer函数内部，保证每次点击按钮时都能拿到用户输入的最新内容。

document.querySelector('input[type=button]').addEventListener("click", function(){tekstEndrer();});

const tekstEndrer = () => {
  // 每次触发函数时读取输入框最新值
  const tekst = document.getElementById("tekstInput").value;
  let res = "";
  for (let i = 0; i < tekst.length; i++) {
    res += i % 2 == 0 ? tekst.charAt(i).toUpperCase() : tekst.charAt(i);
  }
  // 如果不需要渲染HTML标签，推荐用textContent代替innerHTML更安全，避免XSS风险
  document.getElementById("nyTekst").textContent = res;
}

• 可以给输入框加回车触发逻辑，提升使用体验：给tekstInput绑定keyup事件，判断按下的是回车键时直接调用tekstEndrer方法。

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