Selecting an element ID that was created in an innerHTML variable

Question

How do I select the textfield element "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');
  }

Am I selecting it correctly? if so why am I not getting a 'hi' alert when clicking on the submit button. I press it with the textfield empty so I'm assuming the paywallName.value === null should be true. I tried querySelector(#member-name) & querySelector(member-name) to no avail.

paywallName.value === null should be true No. Empty string is not exactly equal to null. — James
– James, Commented Jan 15, 2024 at 18:22
Try printing paywallName.value to see what it actually is to debug your if statement: console.log(typeof paywallName.value, paywallName.value). — ggorlen
– ggorlen, Commented Jan 15, 2024 at 23:38

AHDZ · Accepted Answer · 2024-01-15 18:43:04Z

-2

Why don't you add elements with DOM object? For example, in order to add the input element, add this code:

var input = document.createElement('input');
input.type = "text";
input.id = "member-name";
paywall.appendChild(input);

Also you can summarize these codes by jquery.

answered Jan 15, 2024 at 18:43

AHDZ

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Selecting an element ID that was created in an innerHTML variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related