有人能解释一下为什么按钮在小 class 中执行相同的结果吗？

Question

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>

它就像一个简单的 Todo 项目。问题是当我单击按钮时，它每次都会打印输入中的第一个值。当我将按钮放在小 class 的内部时，它仅在第一次单击时起作用。当我按下按钮并在小 class 之外输入时，它可以正常工作。但是我不明白其中的核心原因。

Answer 1

要获取输入的新值，请在回调函数中获取值：

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>

更新： 当按钮位于带有 class="little" 的元素内并且您要替换 html 使用 innerHTML，按钮正在丢失点击事件。在这种情况下使用 insertAdjacentHTML：

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>

有人能解释一下为什么按钮在小 class 中执行相同的结果吗？

Can you somebody explain me why button executes the same result in the little class?

javascript

dom-events