addEventListener绑定导航栏元素失效：点击第二个元素无法修改第一个元素名称

你的代码未生效主要有三个核心问题，以下是具体分析和修正方案：

1. 问题根源 #

• 脚本执行时机错误：如果JS代码放在HTML结构之前，浏览器执行document.getElementById("el2")时，导航栏的DOM元素还未被解析，导致获取不到元素，事件绑定失败。
• a标签默认跳转干扰：点击第二个导航项里的<a>标签时，浏览器会默认执行跳转动作（跳转到#section1），直接中断你的JS逻辑，导致alert和修改操作无法正常完成。
• HTML结构不完整：原代码缺少多个闭合标签（如</ul>、</div>），可能导致DOM解析异常，间接影响JS功能。

2. 修正后的完整代码 #

HTML部分（补全闭合标签） #

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                 
      </button>
      <a id="el1" class="navbar-brand" href="#">LABEL 1</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li id="el2"><a href="#section1">LABEL 2</a></li>
          <li id="el3"><a href="#section2">LABEL 3</a></li>
          <li id="el4"><a href="#section3">LABEL 4</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

JS部分（放在</body>标签前） #

function ChangeName(e) {
  // 阻止a标签的默认跳转行为
  e.preventDefault();
  alert("Second label clicked");
  var el1 = document.getElementById("el1");
  el1.innerHTML = "New name";
}

// 等待DOM完全加载后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 获取第二个导航项的li元素，绑定点击事件
  var el2 = document.getElementById("el2");
  el2.addEventListener("click", ChangeName);

  // 若需更精准绑定到a标签，可替换为以下代码：
  // var el2Link = document.querySelector("#el2 a");
  // el2Link.addEventListener("click", ChangeName);
});

3. 关键修正说明 #

• DOMContentLoaded事件：确保浏览器解析完所有HTML元素后再执行JS，避免因DOM未加载完成导致的元素获取失败。
• e.preventDefault()：阻断a标签的默认跳转逻辑，让你的修改代码可以完整执行。
• 补全HTML闭合标签：保证DOM结构解析正常，消除潜在的布局或JS异常。

内容的提问来源于stack exchange，提问作者María