dialog html play

by andrew rowe

HTML

<dialog>
  <form method="dialog">

    <label>Email: <input id="dialog-email" type="email" value="[email protected]"></label>
    <hr>
    <button id="dialog-submit" type="submit">
      Submit
    </button>
    <button id="dialog-cancel" cancel>Cancel</button>
  </form>
</dialog>

<button id="button-enter">
  Enter Email
</button>
<ul id="emails">

</ul>

JavaScript

const dialog = document.querySelector("dialog");
const bShow = document.querySelector("#button-enter");
const bSubmit = document.querySelector("#dialog-submit");
const bCancel = document.querySelector("#dialog-cancel");
const ulEmails = document.getElementById("emails");
const inputEmail = document.getElementById("dialog-email");

bShow.addEventListener("click", () => dialog.showModal());
bCancel.addEventListener("click", () => dialog.close());
dialog.addEventListener("close", () => {
  const li = document.createElement('li');
  li.innerHTML = inputEmail.value;
  ulEmails.append(li);
});