为何addEventListener外部的for循环失效？内部循环却正常？

为什么外部的for循环不生效？ #

JavaScript代码是从上到下顺序执行的：

• 页面加载时，你的myLeads是空数组，此时外部的for循环判断i < myLeads.length（也就是i < 0），条件不成立，循环直接跳过，根本没执行。
• 之后点击按钮往myLeads里添加数据时，这个外部循环早就执行完了，不会再重新触发，所以页面上看不到列表更新。

而把循环放在事件监听器内部时，每次点击按钮都会触发循环，此时myLeads已经有新数据了，循环就能正常生成列表项并更新页面。

优化后的解决方案 #

你可以把渲染列表的逻辑抽成独立函数，每次添加数据后调用它，这样代码更清晰，还能避免重复添加列表项的问题：

const inputEl = document.getElementById("input-el")
const btn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")
let myLeads = []

// 封装渲染列表的函数
function renderLeads() {
  // 先清空原有列表，避免重复渲染
  ulEl.innerHTML = ""
  // 循环生成新的列表项
  for(let i = 0; i < myLeads.length; i++) {
    ulEl.innerHTML += `<li>${myLeads[i]}</li>`
  }
}

btn.addEventListener("click", function(){
  // 把输入框的值加入数组
  myLeads.push(inputEl.value)
  // 调用渲染函数更新页面
  renderLeads()
  // 清空输入框，提升用户体验
  inputEl.value = ""
})

额外说明 #

原来把循环放监听器内部的写法，每次点击都会把整个数组的项再添加一遍（比如点击3次会生成6个列表项），而上面的优化写法每次渲染前先清空列表，只会显示当前数组里的所有项，逻辑更合理。

内容的提问来源于stack exchange，提问作者Owais Ahmad