如何选择innerHTML动态生成的element ID？空输入为何不触发弹窗？

1. 元素选择的正确性 #

document.querySelector("#member-name")的写法是正确的，只要付费墙内容已经通过innerHTML生成并插入到DOM中，点击按钮时就能正确选中输入框元素，这部分没有问题。

2. 空输入不触发弹窗的核心原因 #

input输入框的value属性，当用户没有输入内容时，值是空字符串""，而不是null。你当前的判断条件if (paywallName.value === null)永远不会成立，所以alert不会触发。

修正后的代码 #

function revealPaywall (){
  const paywall = document.getElementById('paywall')
  const name = localStorage.getItem("value");
  if (localStorage.getItem("value") === null){
    paywall.innerHTML =
      `
      <h1>This Is An Example Of A Paywall</h1>
      <p>If you enter a name, it will be saved to the localStorage. To bypass just enter your name and click the "submit" button</p>
        <label for="name">Member Name:</label>
        <input type="text" id="member-name">
        <br><br><br>
        <button onclick="paywallComplete()">SUBMIT</button>
      `
  }
}
function paywallComplete (){
  const paywallName = document.querySelector("#member-name");
  // 修正判断条件：检查是否为空字符串，trim过滤空白字符
  if (paywallName.value.trim() === ""){
    window.alert('hi');
  }
  // 可选：添加保存输入值到localStorage的逻辑
  // localStorage.setItem("value", paywallName.value);
}

额外细节修正 #

• 原代码里的<h1>和<p>标签未正确闭合，修正后避免DOM解析异常
• 使用trim()可以过滤用户输入的空格、换行等空白字符，更严谨判断有效输入
• 原paywallComplete函数缺少闭合大括号，修正后保证代码正常执行

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