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

需要实现点击按钮出现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>

因为 你是 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)
           }
       }

   }

点2次是要这个效果吗？

img


<body>
    <div class="main">
      <button id="btn" onclick="btnClick()">自动生成10个li</button>
      <ul></ul>
    </div>

    <script>
      var ul = document.querySelector("ul");
      var clickNum = 0; //记录点击次数
      var start = 0,
        end = 10,
        step = 10; //start：遍历开始数  end：遍历结束数  step：生成多少个
      function btnClick() {
        start = step * clickNum + 1;
        end = start + step;
        for (var i = start; i < end; i++) {
          sum = Math.round(1 + Math.random() * 3);
          li = document.createElement("li");
          li.className = "color" + sum;
          span = document.createElement("span");
          li.appendChild(span);
          span.innerHTML = i;
          ul.appendChild(li);
        }
        clickNum++;
      }
    </script>
  </body>