选择在innerHTML变量中创建的元素ID

Question

如何选择文本字段元素“member-name”？

function revealPaywall (){
  const paywall = document.getElementById('paywall')
  const name = localStorage.getItem("value");
//TO WRITE MULTILINE HTML IN JS, USE BACKTICKS `` TO CREATE A TEMPLATE LITERAL
  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");
  if (paywallName.value === null){
    window.alert('hi');
  }

我选择正确吗？如果是这样，为什么我在单击“提交”按钮时没有收到“嗨”警报。我在文本字段为空的情况下按下它，所以我假设

paywallName.value === null

应该是真的。我尝试了

querySelector(

#member-name

)

&

querySelector(

member-name

)

但没有成功。

Answer 1

在 JavaScript 中，当输入字段为空时，其值不是 null，而是空字符串 ("")。因此，当您检查 paywallName.value === null 时，对于空输入字段来说，它不会成立。

function paywallComplete() {
  const paywallName = document.querySelector("#member-name");
  if (paywallName.value === "") {
    window.alert('hi');
  }
}