如何从JavaScript中添加HTML元素[关闭]

6pp0gazn  于 2023-11-15  发布在  Java
关注(0)|答案(3)|浏览(139)

**已关闭。**此问题需要debugging details。目前不接受回答。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答问题。
2天前关闭。
Improve this question
我试图创建一个芯片时,复选框被选中,通过添加一个eventlistener函数到复选框,但它没有发生。我认为元素没有被插入到html。下面是代码

let ChoosenFiltercontainer = document.getElementById('ChoosenFiltercontainer')
let FilterDropdownsElems = document.querySelector('.FilterDropdowns');
let FilterDropdownsElem = FilterDropdownsElems.querySelectorAll('[type=checkbox]');
let customid = "";
for (let i = 0; i < FilterDropdownsElem.length; i++) {
  customid = customid + FilterDropdownsElem[i].id + i;
  FilterDropdownsElem[i].addEventListener('click', function(customid) {
    ChoosenFiltercontainer.innerHTML += `<div class="col-md-auto " id=${customid}  style="display:none;" >
          <div class="chip chip-outline btn-outline-dark rounded-pill" data-mdb-ripple-color="dark">
            ${FilterDropdownsElem[i].id} <i class="close fas fa-times" style="font-size: small;"></i>
          </div>
        </div>`;
    if (FilterDropdownsElem[i].checked == true) {
      document.getElementById('customid').style.display = "block";
    } else {
      document.getElementById('customid').style.display = "none";
    }
  }.bind(this, customid))
}

字符串
我认为我没有正确使用innerHTML属性

zwghvu4y

zwghvu4y1#

我总是建议委托,所以我将重构,而不是调试你的代码,其中有一些奇怪的语句,如你的。
下面是一个从filterDropdown容器和fieldsenFiltercontainer委托的版本
我将复选框ID作为一个数据属性添加到close中,这样我们就可以在关闭过滤器时取消选中它

const ChoosenFiltercontainer = document.getElementById('ChoosenFiltercontainer');
document.querySelector('.FilterDropdowns').addEventListener('click', (e) => {
  const tgt = e.target;

  if (!tgt.matches("input[type=checkbox]")) return;
  let elementId = `${tgt.id}_container`; // Create a unique ID for the container
  let filterElement = document.getElementById(elementId);
  if (!filterElement) {
    console.log('creating div');
    ChoosenFiltercontainer.innerHTML += `<div class="col-md-auto filter" id="${elementId}" style="display: none;"><div class="chip chip-outline btn-outline-dark rounded-pill" data-mdb-ripple-color="dark">${tgt.id} <i data-id="${tgt.id}" class="close fas fa-times" style="font-size: small;"></i></div></div>`;
    filterElement = ChoosenFiltercontainer.lastChild;
  }
  filterElement.style.display = tgt.checked ? 'block' : 'none';
});
ChoosenFiltercontainer.addEventListener('click', (e) => {
  const tgt = e.target;
  if (tgt.matches('i.close')) {
    const filterId = tgt.dataset.id;
    document.getElementById(filterId).checked = false;
    tgt.closest('div.filter').style.display = 'none';
  }  
});

个字符

tzcvj98z

tzcvj98z2#

看起来,您尝试根据复选框状态设置显示属性的方式可能存在问题。此外,您尝试设置动态创建的div的ID的方式也存在问题。尝试以下操作:
使用event.target获取事件处理程序中的clicked checkbox元素。
删除不必要的复选框状态(if (FilterDropdownsElem[i].checked == true)),因为它是多余的。
使用div.remove()在取消选中相应复选框时删除动态创建的div。

let ChoosenFiltercontainer = document.getElementById('ChoosenFiltercontainer');
let FilterDropdownsElems = document.querySelector('.FilterDropdowns');
let FilterDropdownsElem = FilterDropdownsElems.querySelectorAll('[type=checkbox]');
let customid = "";

for (let i = 0; i < FilterDropdownsElem.length; i++) {
    customid = FilterDropdownsElem[i].id + i; // Use a simpler customid
    
    FilterDropdownsElem[i].addEventListener('click', function (event) {
        let checkbox = event.target;
        let divId = checkbox.id + i;
        let div = document.getElementById(divId);

        if (checkbox.checked) {
            // If the checkbox is checked, create the div if it doesn't exist
            if (!div) {
                ChoosenFiltercontainer.innerHTML += `<div class="col-md-auto" id="${divId}">
                    <div class="chip chip-outline btn-outline-dark rounded-pill" data-mdb-ripple-color="dark">
                        ${checkbox.id} <i class="close fas fa-times" style="font-size: small;"></i>
                    </div>
                </div>`;
            }
        } else {
            // If the checkbox is unchecked, remove the corresponding div
            if (div) {
                div.remove();
            }
        }
    });
}

字符串

wqnecbli

wqnecbli3#

我不确定你的代码的其余部分,因为你还没有提供html和CSS文件。无论如何,阅读你的代码,并使用customId作为一个字符串,而不是作为一个变量可能是问题,如果一切都很好。

document.getElementById('customid').style.display = "block";

字符串
试着把这个改成

document.getElementById(customid).style.display = "block";


对于display =“none”的情况,执行相同的操作

相关问题