Button created from javascript is not clickable

Question

const button = document.createElement("button")
const subject = document.querySelector(".bg-backdrop")

button.textContent = "Register"
subject.insertAdjacentElement("beforebegin",button)

button.addEventListener("click", word)

function word() {
    console.log("It works!")
}

.wrapper {
  position: relative;
  z-index: 10;
}

.bg-backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: black;
  opacity: 0.2;
}

<div class="wrapper">
 <div class="bg-backdrop"></div>
</div>

the button created inside JavaScript doesn't work, can't be clicked, and no output is shown

I have tried removing z-index but still not working. Also putting the button element outside of wrapper, still doesn't work!

Answer 1

Added this line at line number 5:

button.setAttribute('style','position:relative; z-index: 100;')

Basically we have to add z-index for button and also a position to make z-index work.

const button = document.createElement("button")
const subject = document.querySelector(".bg-backdrop")

button.textContent = "Register"
button.setAttribute('style', 'position:relative; z-index: 100;')
subject.insertAdjacentElement("beforebegin", button)

button.addEventListener("click", word)

function word() {
  console.log("It works!", document)
}

.wrapper {
  position: relative;
  z-index: 10;
}

.bg-backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: black;
  opacity: 0.2;
}

<div class="wrapper">
  <div class="bg-backdrop"></div>
</div>