文章/答案/技术大牛

发布

社区首页 >问答首页 >Uncaught : closeBtn.addEventListener不是script.js:8的一个函数

问Uncaught : closeBtn.addEventListener不是script.js:8的一个函数
EN

Stack Overflow用户

提问于 2019-02-19 12:55:51

回答 2查看 463关注 0票数 1

在我的closeBtn中添加函数时遇到了一些问题，因为它返回了错误的TypeError: closeBtn.addEventListener不是一个函数

我真的不知道为什么其他变量工作得很好，我不认为这是一个错误，我反复检查了我调用的类名。

   //View Faculty Schedule MODAL SCRIPT//
var modal2 = document.getElementById('view-modal'); //Get Modal Element
var modalBtn = document.getElementById('searchfaculty'); //Button Element
var closeBtn = document.getElementsByClassName('closeBtn'); //Close Button Element
//opening
modalBtn.addEventListener('click', openModal);
//closing
closeBtn.addEventListener();

function openModal() {
    modal2.style.display = "block";
}

function closeModal() {
    modal.style.display = "none";
}

然后，html

<div id="view-modal" class="modal2">
<div class="modal-view">
    <span class="closeBtn">&times;</span>
    <p>sfsdfsdfsdfdf</p>
</div>

提前感谢

php

html

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-02-19 13:13:47

它返回数组中的节点列表集合，因此必须按索引获取。

closeBtn[0].addEventListener(function(){
 });

查看如何选择正确的选择器

票数 0

Stack Overflow用户

发布于 2019-02-19 13:30:31

getElementById()返回具有相应id的第一个HTML元素，而getElementsByClassName()则返回具有相应类的所有元素的HTML集合。

 closeBtn[0].addEventListener('click',()=>{
 //execute your code
 });

var modal2 = document.getElementById("view-modal"); //Get Modal Element
//var modalBtn = document.getElementById("searchfaculty"); //Button Element
var closeBtn = document.getElementsByClassName("closeBtn"); //Close Button Element
//Your answer
closeBtn[0].addEventListener("click", () => {
  //execute your function
});
//check what it returns
console.log(modal2);
console.log(closeBtn);
function openModal() {
  modal2.style.display = "block";
}

function closeModal() {
  modal.style.display = "none";
}

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="app">

        <div id="view-modal" class="modal2">
            <div class="modal-view">
                <span class="closeBtn">&times;</span>
            <p>1st Close Button</p>
        </div>
        <div id="view-modal" class="modal2">
            <div class="modal-view">
                        <span class="closeBtn">&times;</span>
                    <p>2nd Close Button </p>
        </div>

    </div>


</body>

</html>

为了更好地理解，您可以参考以下代码。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54766876

复制

相似问题

问Uncaught : closeBtn.addEventListener不是script.js:8的一个函数
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Uncaught : closeBtn.addEventListener不是script.js:8的一个函数EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Uncaught : closeBtn.addEventListener不是script.js:8的一个函数
EN