时间戳

首页 > 解决方案 > 如何使用 JavaScript 在 HTML 中生成可点击的数组/列表

javascript - 如何使用 JavaScript 在 HTML 中生成可点击的数组/列表

问题描述

我正在尝试使用 JavaScript 函数制作一个列表以在 HTML 页面上呈现。我知道我可以使用DOM.createElement("LI")，但我希望列表中的每个项目都具有不同的属性，以便在单击列表的那一部分时，它会重新迭代该函数。

这是我当前的 HTML（我以 的参数5为例，我确实有一组可能的数字）：

<!DOCTYPE html>
<html>
<body>

<p id="count" onclick="makeAList(5)">Click me too!</p>

<script>
function makeAList(num){
    var itemList = [];
    for (i = 0; i < num; i ++){
        itemList.push(i);
        itemList.forEach(document.setAttribute("onclick", makeAList(i)) = i);
    }
    document.getElementById("count").innerHTML = itemList;
}
</script>

</body>
</html>

单击初始页面时，我无法生成任何内容。我应该如何解决这个问题？我想要它，当我点击它时，Click me too!它会生成0,1,2,3,4，然后如果我点击它，比如说3，它会呈现0,1,2.

标签： javascripthtmlarrayslistonclick

解决方案

这里有几件事需要改变。

首先，在这种情况下，我将使用addEventListener而不是setAttribute.

接下来，这一行将document.setAttribute("onclick", makeAList(i))给您一个Maximum call stack size exceeded.错误，因为通过这样编写函数makeAList(i)将在当时和那里调用它，从而不断调用相同的函数。你可以只写document.setAttribute("onclick", makeAList)。不需要参数，因为在下一部分中，您将能够从 click 事件本身获取参数。

接下来，我将为数组中的每个项目创建一个新元素，这样您就可以根据每个项目确定要进行多少次迭代innerText。如果不这样做，无论您是否单击 0、1 或 2，目标的 innerText 都将0,1,2如此，因此您将无法充分确定要执行的正确迭代次数。您将它们分成不同的元素，每个元素都会onclick添加一个事件。现在，当您单击该元素时，makeAList您将可以访问该元素event.target.innerText，使用parseInt后将给您一个整数，您可以将其用作迭代长度。

document.getElementById("count")最后，一旦你有了一个基于从事件收集的迭代长度生成的元素数组，你可以通过将它设置为等于来清除目标 () 的 innerHtml ''。然后你遍历你的元素数组并使用append将它们附加到你的目标。

您还可以通过将元素的 CSS 设置为display; inline-block;并使用以下条件确定添加逗号的位置来调整格式。

p.innerHTML = i < ln - 1 ? i + ', ' : i

function makeAList(){
    var itemList = [];
    var ln = parseInt(event.target.innerText) >=0 ? parseInt(event.target.innerText) + 1 : 3
    for (i = 0; i < ln; i ++){
        var p = document.createElement('P')
        p.innerHTML = i < ln - 1 ? i + ', ' : i
        p.addEventListener("onclick", makeAList)
        itemList.push(p);
    }
    
    document.getElementById("count").innerHTML = ''
    
    itemList.forEach((x)=>{
      document.getElementById("count").append(x)
    })
}
p {
  display: inline-block;
}
<!DOCTYPE html>
<html>
  <body>

    <p id="count" onclick="makeAList()">Click me too!</p>

  </body>
</html>

推荐阅读