JavaScript(webAPI)【随机点名案例】

【随机点名案例】
需求：将名字放入span 盒子内部
分析：
①：获取span 元素
②：得到随机的名字
③：通过innerText 或者 innerHTML 将名字写入元素内部
css：

span {
      display: block;
      width: 100px;
      margin-top: 100px;
      padding: 10px 20px;
      border: solid #f00 1px;
      text-align: center;
    }

HTML：

<button>随机抽取button>
  <span>这是渲染位置span>
  <script>
    let names = ['1', '2', '3', '4', '5', '6']
    // 获取按钮
    let btn = document.querySelector('button')
    let span = document.querySelector('span')
    btn.addEventListener('click', function () {
      // 1.生成一个随机数
      let index = parseInt(Math.random() * names.length)
      // 2.获取随机数所对应的姓名
      let name = names[index]
      // 3.将姓名渲染到span内部
      // 如果没有标签，可以任意使用--innerText
      // 如果有标签，就使用innerHTML
      span.innerText = name
    })
  script>