Question 237439 in Html Question posted in
Some basic documentation can be found here.

Html – Button created from javascript is not clickable

HTML

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

CSS

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

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

JS

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!")
}

the button created inside javascript doesnt work, cant 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 doesnt work

Tags:

3

Answers


  1. 0 
    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>
    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!")
}

    just add this code in javascript file

    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.

    Login or Signup to reply.
  2. 0

    You can easily solve this problem by using z-index: -1 for the .bg-backdrop class.

    Login or Signup to reply.
  3. 0

    The issue you’re facing could be related to the stacking context and the z-index of the elements in your code.

    Z-Index and Stacking Context:
    When an element has a higher z-index within its stacking context, it will appear on top of elements with a lower z-index. However, in your case, the .bg-backdrop element has a fixed position and is likely creating its own stacking context. The dynamically created button, despite having a higher z-index, might be placed behind the .bg-backdrop because of this.

    To address this, you can increase the z-index of the dynamically created button and ensure that it is in the same stacking context as the .bg-backdrop element.

    HTML:

    <div class="wrapper">
  <button class="register-button">Register</button>
  <div class="bg-backdrop"></div>
</div>

    CSS:

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

.bg-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: black;
opacity: 0.2;
z-index: 5; /* Adjusted z-index */
}

    JavaScript:

    const button = document.querySelector(".register-button");
button.addEventListener("click", word);

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

    By keeping the button and the .bg-backdrop in the same stacking context and adjusting their z-index accordingly, the button should be clickable and work as expected.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search