触发事件如何实现函数重载

Question

需要实现点击按钮出现10个颜色不一样的盒子，但是再次点击的时候他原来的不会消失，我想有没有一种方式让他点击的时候函数重新加载一下

    <script>
        var btn = document.querySelector('#btn')
        var ul = document.querySelector('ul')
        btn.onclick = function () {
            kk()
            function kk() {
                for (i = 0; i < 10; i++) {
                    sum = Math.round(1 + Math.random() * 3)
                    li = document.createElement('li')
                    li.className = 'color' + sum
                    // console.log( 'color'+sum)
                    span = document.createElement('span')
                    li.appendChild(span)
                    span.innerHTML = i
                    ul.appendChild(li)
                }
            }

        }
    </script>

    <button id="btn">
        自动生成10个li
    </button>
    <ul>

    </ul>

Answer 1

因为 你是 ul.appendChild所以 会追加 。你需要 先清空 ul 再追加
追加前 ul.innerHTML="" 清空

 var btn = document.querySelector('#btn')
   var ul = document.querySelector('ul')
   btn.onclick = function () {
       kk()
       function kk() {
           ul.innerHTML="";
           for (i = 0; i < 10; i++) {
               sum = Math.round(1 + Math.random() * 3)
               li = document.createElement('li')
               li.className = 'color' + sum
               // console.log( 'color'+sum)
               span = document.createElement('span')
               li.appendChild(span)
               span.innerHTML = i
               ul.appendChild(li)
           }
       }

   }