javascript - 在JS中创建一行可点击的按钮

Question

我正在尝试翻译以下 HTML 代码；

                <div class="dot-span">
                    <span class="dot" onclick="currentSlide(1)"></span>
                    <span class="dot" onclick="currentSlide(2)"></span>
                    <span class="dot" onclick="currentSlide(3)"></span>
                    <span class="dot" onclick="currentSlide(4)"></span>
                    <span class="dot" onclick="currentSlide(5)"></span>
                    <span class="dot" onclick="currentSlide(6)"></span>
                    <span class="dot" onclick="currentSlide(7)"></span>
                    <span class="dot" onclick="currentSlide(8)"></span>
                    <span class="dot" onclick="currentSlide(9)"></span>
                    <span class="dot" onclick="currentSlide(10)"></span>
                    <span class="dot" onclick="currentSlide(11)"></span>
                    <span class="dot" onclick="currentSlide(12)"></span>
                    <span class="dot" onclick="currentSlide(13)"></span>
                    <span class="dot" onclick="currentSlide(14)"></span>
                    <span class="dot" onclick="currentSlide(15)"></span>
                    <span class="dot" onclick="currentSlide(16)"></span>
                    <span class="dot" onclick="currentSlide(17)"></span>
                    <span class="dot" onclick="currentSlide(18)"></span>
                </div>

到一个复制 HTML 代码操作的 JavaScript 函数中，但我不确定从哪里开始，因为有很多类，每个元素都显示不同的幻灯片。任何建议都会很棒。

Answer 1

var containerDiv=document.body.querySelector('.dot-span');

function currentSlide(slide){
  console.log('click on slide '+slide);
}

for (var i=1; i<=18; i++){
  var span=document.createElement('span');
  span.setAttribute('class','dot');
  span.setAttribute('slideNumber',i);
  span.innerHTML='slide '+i;
  
  span.onclick=function(){
    var slideNum=this.getAttribute('slideNumber');
    currentSlide(slideNum);
  }
  
  containerDiv.appendChild(span);
  //onclick="currentSlide(1)"
}

.dot{
  width:50px;
  height:50px;
  margin:3px;
  background-color:red;
  cursor:pointer;
}

<div class="dot-span">
                    
                </div>