CODEWITHSUNDEEP
javascripthtmlcss
codingmonk
codingmonk

Reputation: 33

input box not allowing to type

I ran into a weird problem, input box html not allowing typing.

const para = document.createElement('p')
const innerCard = document.getElementsByClassName('attach')

for(let i = 0; i < innerCard.length; i ++){
   innerCard[i].addEventListener('click',createInput)
   innerCard[i].addEventListener('dblclick',hide)

  }

function hide(){
   para.style.display = 'none'
   for(let i = 0; i < innerCard.length; i ++){
   innerCard[i].removeEventListener('mouseout',hide)
  }
 }
function createInput(){
   let input = document.createElement('input');
   para.innerText = 'Topics'
   para.className = "blem'
   innerCard[0].appendChild(para)
   para.appendChild(input)
   para.style.display = 'grid'
   for(let i = 0; i < innerCard.length; i ++){
      innerCard[i].removeEventListener('mouseover',createInput)
   }
}

full code: https://jsfiddle.net/nj7ne83y/3/

Upvotes: 0

Views: 46

Answers (2)

reiallenramos
reiallenramos

Reputation: 1295

I got it working, with the assumption that you want to create a sibling of the class "attach", not a child of it.

Change this line:

innerCard[0].appendChild(para)

to this:

innerCard[0].parentElement.appendChild(para)

Upvotes: 0

Kosh
Kosh

Reputation: 18378

Your click on input propagates to innerCard and calls createInput over and over again.

Stop it this way:

function createInput(){
    let input = document.createElement('input');
    input.addEventListener('click', function(e){e.stopPropagation()});
...

https://jsfiddle.net/nj7ne83y/4/

Upvotes: 1

Related Questions