CODEWITHSUNDEEP
javascripthtmlevent-handlingdom-events
bbBell
bbBell

Reputation: 15

Add Event Listener not attaching

I can console.log my '.span' element, as well as my '.header' element, but I can't attach an event listener to either. I am able to attach an event listener to my innerDiv (const c) though.

Ultimately, the .span would act as the way to remove the modal.

JSFiddle

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="#">
    <link rel='stylesheet' href='style.css'>
    <script type="text/javascript" src="./index.js" defer></script>
</head>
<body>
    <button id='test'>test</button>
</body>
</html>

function createModal(id, className, innerId, wrapName){
    const div = document.createElement('div')
    div.setAttribute('id', 'poem-header'+id)
    div.classList = 'header'
    const span = document.createElement('span')
    span.classList = 'span'
    span.innerHTML = 'X'
    div.appendChild(span)

    const c = document.createElement('div')
    c.setAttribute('id', `${innerId}`)
    c.classList = 'poem'
    const wrap = document.createElement('div')
    wrap.setAttribute('id', wrapName)
    wrap.classList = 'wrap'
    document.body.appendChild(wrap)
    document.getElementById(`${wrapName}`).append(div, c)

    document.querySelector('.span').addEventListener('click', function(){
        console.log('working')
    })
}
 document.getElementById('test').addEventListener('click', ()=>{
    document.getElementById('test').setAttribute('disabled', 'true')
    createModal('-0', 'poem0', 'poem0', 'wrap0')
 })

Upvotes: 0

Views: 280

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370679

The z-index of -99999 is causing the .wrap to not be clickable; clicks register not on it, but on the element(s) visually above it (which is the <body>)

Remove the z-index and it'll be clickable.

function createModal(id, className, innerId, wrapName) {
  const div = document.createElement('div')
  div.setAttribute('id', 'poem-header' + id)
  div.classList = 'header'
  const span = document.createElement('span')
  span.classList = 'span'
  span.innerHTML = 'X'
  div.appendChild(span)

  const c = document.createElement('div')
  c.setAttribute('id', `${innerId}`)
  c.classList = 'poem'
  const wrap = document.createElement('div')
  wrap.setAttribute('id', wrapName)
  wrap.classList = 'wrap'
  document.body.appendChild(wrap)
  document.getElementById(`${wrapName}`).append(div, c)

  document.querySelector('.span').addEventListener('click', function() {
    console.log('working')
  })
}
document.getElementById('test').addEventListener('click', () => {
  document.getElementById('test').setAttribute('disabled', 'true')
  createModal('-0', 'poem0', 'poem0', 'wrap0')
})
.wrap {
  display: inline-block;
  position: absolute;
  height: 280px;
  width: 250px;
  background-color: rgb(241, 238, 238);
  margin: 0 auto;
  padding-bottom: 1em;
  border: 1px solid rgb(73, 71, 71);
  box-shadow: 5px 3px;
  margin-bottom: 1em;
  overflow: hidden;
}

.header {
  background-color: rgba(255, 255, 255, 0.849);
  padding: 0 .5em;
  border: 1px solid rgb(75, 73, 73);
  color: rgba(39, 37, 37, 0.87);
  font-size: 1rem;
  font-weight: bold;
  text-align: right;
  cursor: grab;
  position: sticky;
}

.span {
  cursor: pointer;
}

.poem {
  display: inline-block;
  width: inherit;
  height: inherit;
  overflow: scroll;
  flex-direction: column;
  align-items: flex-start;
  text-align: center;
  cursor: help;
}
<button id='test'>test</button>

Upvotes: 3

Related Questions