0

const yazı = document.getElementsByTagName("input")[0]

let buton = document.getElementsByTagName("button")[0]

var kucuk = document.getElementsByClassName("little")[0]

buton.addEventListener("click", function(e) {
  kucuk.innerHTML += `
       <ul>
       <li> ${yazı.value}<span></span></li>
       </ul>
       `
})
<div class="container">
  <h2>a message you would like to pass</h2>
  <button>submit</button>
  <div class="little">
    <input type="text" /><br />
  </div>
</div>

It is like a simple Todo Project. The problem is when i click the button it prints the first value in the input everytime. And when i put the button to inside of the little class, it works only in first click nothing more. When i take button and input outside of the little class, it works properly. But i don't understand the core reason of that.

caner e.
  • 17
  • 4
  • 2
    If the button is inside the little class using `kucuk.innerHTML += ` will replace all elements that exist with new ones when the updated html gets rendered. That causes previous event listeners to be lost. The elements look the same but they are completely different objects that didn't exist before – charlietfl Mar 25 '21 at 13:07
  • 2
    Instead of using `innerHTML +=` you should learn various element insertion methods that don't replace existing ones – charlietfl Mar 25 '21 at 13:13
  • 1
    It looks like `.innerHTML +=` keeps resetting the value of the input. The proper solution is to either use a different insertion method or to move the out of the element to which you're appending. –  Mar 25 '21 at 13:15
  • I put console.log("asd") in the eventlistener to check if eventlistener works or not and in the second click there was no any print. There shouldn't be any update in the second click because it is +=. Sorry i am trying to understand as a newbe. – caner e. Mar 25 '21 at 13:23

1 Answers1

2

To take the new value of the input you have take the value inside the callback function:

let buton = document.getElementsByTagName("button")[0]

var kucuk = document.getElementsByClassName("little")[0]

buton.addEventListener("click",function (e) {
   const yazı = document.getElementsByTagName("input")[0]
   kucuk.innerHTML += `
   <ul>
   <li> ${yazı.value}<span></span></li>
   </ul>
   `
})
<div class="container">

  <h2>a message you would like to pass</h2>
  <button>submit</button>
  
  <div class="little">
    
    <input type="text" /><br />
  
  </div>

</div>

Update: When the button is inside the the element with class="little" and you are replacing the html using innerHTML, the button is losing the click event. Use insertAdjacentHTML in that case:

let buton = document.getElementsByTagName("button")[0]

var kucuk = document.getElementsByClassName("little")[0]

buton.addEventListener("click",function (e) {
   const yazı = document.getElementsByTagName("input")[0]
   kucuk.insertAdjacentHTML('beforeend', `
   <ul>
   <li> ${yazı.value}<span></span></li>
   </ul>
   `);
});
<div class="container">

  <h2>a message you would like to pass</h2>
  
  <div class="little">
  
    <button>submit</button>
    
    <input type="text" /><br />
  
  </div>

</div>
Mamun
  • 66,969
  • 9
  • 47
  • 59