动态创建和选择 <ol> 列表元素 更新相同的有序列表创建新的有序列表

如何解决动态创建和选择 <ol> 列表元素 更新相同的有序列表创建新的有序列表

是否有一些狡猾的原因为什么这不起作用？我不是一个有经验的程序员，我正在练习从列表中创建和选择元素作为我正在创建的程序的核心部分。这段代码旨在创建一个名为“cats”的列表，其中包含一个数字 1-10 的列表，然后用户选择列表中的一个（比如“8”），然后从 8 开始重新生成列表。它第一次工作，但是addEventListener 第二次似乎不起作用，即使事件引用的列表已经创建。我欢迎任何建议。

function listenup() {
  document.getElementById("cats").addEventListener("click",function(e) {
    create(e.target.textContent);
  });
}

function create(mycount) {
  var ol = document.createElement("ol");
  ol.setAttribute("id","cats");
  document.body.appendChild(ol);
  var tempCount = mycount;
  for (var i = mycount; i <= 10 + (tempCount - 1); i++) {
    var li = document.createElement("li");
    li.className = "file";

    var a = document.createElement("a");
    a.innerHTML = i;

    li.appendChild(a);
    ol.appendChild(li);
  }
  listenup();
}
create(1);

解决方法

尝试更改您的代码

function listenup() {
    document.getElementById("cats").addEventListener("click",function(e) {
    create(e.target.textContent);
        });
}

到

function listenup() {
    document.getElementById("cats").addEventListener("click",function(e) {
    create(parseInt(e.target.textContent));
        });
}

或

function listenup() {
    document.getElementById("cats").addEventListener("click",function(e) {
    create(parseInt(e.target.innerHTML));
        });
}

因为当您的代码返回字符串值时，您需要 int 参数。

,

在 create 函数中添加了一个 if 条件，所以现在它下次也可以使用

function listenup() {
    document.getElementById("cats").addEventListener("click",function(e) {
        create(e.target.textContent);
    });
}

function create(mycount) {
    var ol;
    if (!document.getElementById("cats")) {
        var ol = document.createElement("ol");
        ol.setAttribute("id","cats");
        document.body.appendChild(ol);
    }
    ol = document.getElementById("cats")

    var tempCount = mycount;
    for (var i = mycount; i <= 10 + (tempCount - 1); i++) {
        var li = document.createElement("li");
        li.className = "file";

        var a = document.createElement("a");
        a.innerHTML = i;

        li.appendChild(a);
        ol.appendChild(li);
    }
    listenup();
}
create(1);

,

我会委托

const container = document.getElementById("container")
container.addEventListener("click",function(e) {
  const tgt = e.target.closest("li");
  const num = +tgt.textContent;
  console.log("create",num)
  create(num);
});


function create(mycount) {
  var ol = document.createElement("ol");
  container.appendChild(ol); // empty the container before here if you want to REPLACE
  var tempCount = mycount;
  for (var i = mycount; i <= 10 + (tempCount - 1); i++) {
    var li = document.createElement("li");
    li.className = "file";

    var a = document.createElement("a");
    a.innerHTML = i;

    li.appendChild(a);
    ol.appendChild(li);
  }
}
create(1);

<div id="container"></div>

,

我不太明白您是要继续更新相同的有序列表还是创建新的列表：

更新相同的有序列表

function createOl(startIndex,itemsLength = 10) {
  // Delete the previous list (if any)
  if (document.getElementById("cats")) {
    document.getElementById("cats").remove();
  }
  
  // Create the new list
  const olEle = document.createElement("ol");
  olEle.setAttribute("id","cats");
  olEle.setAttribute("start",startIndex); // if you want to keep the list index and the item text aligned
  document.body.appendChild(olEle);

  for (let i = startIndex; i < startIndex + itemsLength; i++) {
    const liEle = document.createElement("li");
    liEle.setAttribute("class","file");

    const aEle = document.createElement('a');
    aEle.setAttribute("href","#");
    aEle.innerText = i;
    aEle.addEventListener('click',event => {
      event.preventDefault();
      createOl(i);
    });

    liEle.append(aEle);
    olEle.append(liEle);
  }
}

//createOl(1); // uncomment this line if you want to start with a list already visible

document.getElementById('resetOl').addEventListener('click',() => createOl(1));

<button id="resetOl">
  create / reset OL
</button>

创建新的有序列表

function createOl(startIndex,itemsLength = 10,readonly = false) {
  const olEle = document.createElement("ol");
  if (!readonly) olEle.setAttribute("class","duplicateOl");
  olEle.setAttribute("start",startIndex); // if you want to keep the list index and the item text aligned
  document.body.appendChild(olEle);
  
  for (let i = startIndex; i < startIndex + itemsLength; i++) {
    const liEle = document.createElement("li");
    liEle.setAttribute("class","file");
    
    const aEle = document.createElement('a');
    aEle.setAttribute("href",event => {
      event.preventDefault();
      createOl(i);
    });
    
    liEle.append(aEle);
    olEle.append(liEle);
  }
}

createOl(1,undefined,true);

document.getElementById('delOls').addEventListener('click',() => {
  document.querySelectorAll('.duplicateOl').forEach(elem => elem.remove());
});

<button id="delOls">
  delete added lists
</button>