报错：btn1.addEventListener is not a function 代码问题排查求助

错误根源 #

document.getElementsByClassName() 返回的是HTMLCollection（类数组对象），并非单个DOM元素。你直接对这个集合调用 addEventListener()，自然会报错——集合本身没有该方法。同理，clr 也是HTMLCollection，直接使用 clr.style 也会失败。另外，你的HTML代码里没有出现 class="btn" 的元素，这会导致获取的集合为空，即便修正了调用方式，也会触发新的错误（Cannot read properties of undefined）。

修正方案 #

方案1：从集合中提取目标元素 #

如果页面中仅存在一个.btn 和 .colorchange 元素，直接取集合的第一个元素即可：

<div class="content-text">
    <h1 class="colorchange">STATUE OF UNITY</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
         Necessitatibus sint nisi animi ipsum commodi illum fuga eos 
         ad. Amet consectetur fugit adipisci praesentium rem eaque eos
          laudantium, vitae sunt earum.
    </p>
    <!-- 补充btn元素 -->
    <button class="btn">隐藏标题</button>
</div>

<script>
    const clr = document.getElementsByClassName("colorchange");
    const btn1 = document.getElementsByClassName("btn");

    // 取集合第一个元素绑定事件
    btn1[0].addEventListener("click", myfunction)
    function myfunction(){
        // 取集合第一个元素修改样式
        clr[0].style.display = "none";
    };
</script>

方案2：用querySelector直接获取单个元素 #

document.querySelector() 会返回匹配选择器的第一个元素，更适合单个元素的场景：

<div class="content-text">
    <h1 class="colorchange">STATUE OF UNITY</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
         Necessitatibus sint nisi animi ipsum commodi illum fuga eos 
         ad. Amet consectetur fugit adipisci praesentium rem eaque eos
          laudantium, vitae sunt earum.
    </p>
    <button class="btn">隐藏标题</button>
</div>

<script>
    // 直接获取单个元素
    const clr = document.querySelector(".colorchange");
    const btn1 = document.querySelector(".btn");

    btn1.addEventListener("click", myfunction)
    function myfunction(){
        clr.style.display = "none";
    };
</script>

多元素场景处理 #

如果页面中有多个.btn元素，需要遍历集合给每个元素绑定事件：

const btns = document.getElementsByClassName("btn");
for (let btn of btns) {
    btn.addEventListener("click", myfunction);
}

内容的提问来源于stack exchange，提问作者Kishore kumar