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

Question

所以我是 JS 的绝对初学者，但希望有一个列表，用户可以 select 从最多 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= "";

}

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

Hello, can you help me to add up to 5 list item selections in Javascript?

javascript

list

html-lists