Javascript Can'；t获取具有特定类名的按钮的正确数目_Javascript_Html

Javascript Can'；t获取具有特定类名的按钮的正确数目

javascript html

Javascript Can'；t获取具有特定类名的按钮的正确数目,javascript,html,Javascript,Html,我想计算一个div中的按钮数量，我从一个js文件中动态添加按钮。当我在浏览器上运行程序时，按钮显示正确，当我从浏览器检查代码时，所有元素和类名都正确。但是，当我尝试记录类名为“accordion”的按钮数时，它会返回0，而应该返回4 以下是HTML代码： <body class="d-flex justify-content-center" style="width: 100%;height: 50%;"> <div class="container" style="width

我想计算一个div中的按钮数量，我从一个js文件中动态添加按钮。当我在浏览器上运行程序时，按钮显示正确，当我从浏览器检查代码时，所有元素和类名都正确。但是，当我尝试记录类名为“accordion”的按钮数时，它会返回0，而应该返回4

以下是HTML代码：

<body class="d-flex justify-content-center" style="width: 100%;height: 50%;">
<div class="container" style="width: 500px;"><img src="assets/img/header_image.png" style="width: 100%;">        
    <div class="row" style="margin-top: 20px;">
        <div id="accordion-div" class="col">                                            
        </div>
    </div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="index.js"></script>

javascript代码：

var acc = document.getElementsByClassName("accordion");
var acc_div = document.getElementById("accordion-div")
var i;

add_accordion_item = (name, details) => {
    var btn = document.createElement('button');
    acc_div.appendChild(btn);
    btn.innerHTML = name;
    btn.className += "btn btn-success accordion";
    btn.type = "button"

    var details = document.createElement('div');
    acc_div.appendChild(details);
    details.innerHTML = details
    details.className += "panel"
}
url = '.....'
make_list = () => {
    $.getJSON(url, function(data){          
        for(var i = 0; i<data["number_of_threats"]; i++){        
            name = data["info"][i]["name"];          
            details = "details"
            add_accordion_item(name, details);
        }
    });
}

make_list()

console.log(document.getElementsByClassName("accordion").length)
for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}

var acc=document.getElementsByClassName（“accordion”）；
var acc_div=document.getElementById（“手风琴div”）
var i；
添加手风琴项目=（名称、详细信息）=>{
var btn=document.createElement（'button'）；
会计部附属儿童（btn）；
btn.innerHTML=名称；
btn.className+=“btn btn成功手风琴”；
btn.type=“按钮”
var details=document.createElement（'div'）；
会计部附属儿童（详情）；
details.innerHTML=详细信息
details.className+=“面板”
}
url=“…”
制作列表=（）=>{
$.getJSON（url，函数（数据）{
对于（var i=0；i我认为节点数组不获取长度属性
您应该使用forEach而不是for循环
acc.forEach(function(element) {
    element.addEventListener("click", function() {
       this.classList.toggle("active");
       var panel = this.nextElementSibling;
       if (panel.style.display === "block") {
           panel.style.display = "none";
       } else {
         panel.style.display = "block";
       }
    });
  })

我希望它能帮助您
我认为您没有为任何元素添加类accordion
。因为我在html代码中看不到任何类名为accordion的元素。
但是在javascriptcode的内部，在第一行，您试图搜索一个类名为accordion
的元素，变量acc
在开始声明后不会自动更新
您需要在for循环的正上方再次检索acc变量的值。
i、 e.在for循环的正上方，您需要像这样添加行
acc = document.getElementsByClassName("accordion");

for (i = 0; i < acc.length; i++) {

....

acc=document.getElementsByClassName（“accordion”）；
对于（i=0；i
我通过在make\u list函数中添加侦听器修复了它
var acc = document.getElementsByClassName("accordion");
var acc_div = document.getElementById("accordion-div")
var i;

add_accordion_item = (name, details) => {
    var btn = document.createElement('button');
    acc_div.appendChild(btn);
    btn.innerHTML = name;
    btn.className += "btn btn-success accordion";
    btn.type = "button"

    var details = document.createElement('div');
    acc_div.appendChild(details);
    details.innerHTML = details;
    details.className += "panel";
    add_listener(btn);
}
url = '.....'
make_list = () => {
    $.getJSON(url, function(data){          
        for(var i = 0; i<data["number_of_threats"]; i++){        
            name = data["info"][i]["name"];          
            details = "details"
            add_accordion_item(name, details);
        }
    });
}

make_list()


function add_listener(element) {
    element.addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}

var acc=document.getElementsByClassName（“accordion”）；
var acc_div=document.getElementById（“手风琴div”）
var i；
添加手风琴项目=（名称、详细信息）=>{
var btn=document.createElement（'button'）；
会计部附属儿童（btn）；
btn.innerHTML=名称；
btn.className+=“btn btn成功手风琴”；
btn.type=“按钮”
var details=document.createElement（'div'）；
会计部附属儿童（详情）；
details.innerHTML=详细信息；
details.className+=“panel”；
添加侦听器（btn）；
}
url=“…”
制作列表=（）=>{
$.getJSON（url，函数（数据）{
对于（var i=0；我能为我们创建一个代码段或一把小提琴来试试吗？也许你可以尝试另一种方法，创建一个函数来创建侦听器，并在创建按钮后调用它