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

【问题标题】：How to generate a clickable array/list in HTML using JavaScript如何使用 JavaScript 在 HTML 中生成可点击的数组/列表
【发布时间】：2019-11-21 16:26:08
【问题描述】：

我正在尝试使用 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。

【问题讨论】：

您有多个拼写错误和无效的 JS。调试你得到的错误，你会自己解决这个问题。
您可以通过指定onclick 属性来设置点击监听器（例如element.onclick=... 或addEventListener：element.addEventListener('click',...) 比使用 setAttribute 干净得多，而且看起来不像您在设置无论如何它都是一个有效的函数
最终目标是什么，你想从Click me too!开始->用户点击->它显示0,1,2->用户点击1（例如）->你现在显示0,1,2,2 -> 用户点击0 -> 你现在显示0,1,2,1,2,2 等等？
我有一个答案，但我也对最终目标感到困惑，不想发布它。根据您想要实现的目标，我可以相应地调整答案。此外，如果每次您没有真正添加任何内容时迭代仅 3 次，它可能只是替换一些值。我想你可能想要document.getElementById("count").innerHTML += itemList
感谢 cmets，我对此很陌生，我使用的编辑器没有指出 JS 中的错误。对于最终产品，我想点击Click me too! --shows 0,1,2--click 1--show-- 0,1，所以每次点击只返回该点击的结果。我将编辑该函数以尝试使其有效，因为我发现我缺少一个要引入的参数。

标签： javascript html arrays list onclick

【解决方案1】：

这里有几处需要更改。

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

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

接下来，我将为数组中的每个项目创建一个新元素，这样您就可以根据每个项目的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>

【讨论】：

行得通，谢谢！所以我可以理解，parseInt(event.target.innerText) 确定文本（作为整数）在单击时创建的<p> 内部。文本或其他数据类型有类似的方法吗？
我只使用了parseInt，因为event.target.innerText本质上是一个字符串，因为它是存储在DOM中的，在这种情况下，我们需要一个数字来确定迭代量。然而，如果你想要一个字符串，你可以只做event.target.innerText 而没有parseInt。这能回答你的问题吗？
没问题。编码愉快！