javascript - 你好，你能帮我在 Javascript 中添加最多 5 个列表项选择吗？

Question

所以我是 JS 的绝对初学者，但希望有一个用户可以从最多 5 个选项中进行选择的列表，这些选项出现在单独的 div 中。正如你所看到的，我已经成功地让一个点击即可工作。

<ul id="products">
        <li>Bell Box Labels</li>
        <li>Camera Labels</li>
        <li>CCTV Signs</li>
        <li>Certificates & Job Books</li>
        <li>Extinguisher Labels</li>
        <li>Fascia Overlays</li>
        <li>Fire Exit Signage</li>
        <li>Panel Labels</li>
        <li>Serviced By Labels</li>
        <li>Warning Boards</li>
        <li>Window Stickers</li>
    </ul>




<script type="text/javascript">

    var lis = document.getElementById("products").getElementsByTagName('li');

    for (var i=0; i<lis.length; i++) {
        lis[i].addEventListener('click', sampleChoice);
    }


    function sampleChoice() {
        document.getElementById("selection").innerHTML = this.innerHTML;

    }


</script>

Answer 1

这对我有用

<ul id="products">
    <li>Bell Box Labels</li>
    <li>Camera Labels</li>
    <li>CCTV Signs</li>
    <li>Certificates & Job Books</li>
    <li>Extinguisher Labels</li>
    <li>Fascia Overlays</li>
    <li>Fire Exit Signage</li>
    <li>Panel Labels</li>
    <li>Serviced By Labels</li>
    <li>Warning Boards</li>
    <li>Window Stickers</li>
</ul>
<button onclick="resetSelection()">reset</button>
<div id="selection"></div>



<script type="text/javascript">

var lis = document.getElementById("products").getElementsByTagName('li');

for (var i=0; i<lis.length; i++) {
    lis[i].addEventListener('click', sampleChoice);
}

var count=0;
function sampleChoice() {
    if(count<5)
        {
            document.getElementById("selection").innerHTML+= this.innerHTML;
            count++;
}}
function resetSelection()
{
    count=0;
    document.getElementById("selection").innerHTML= "";

}