为什么我的背景颜色不会用生成的十六进制值更新？

Question

I'm hoping to update my background colour alongside the generated hex code each time I click on the button. The hex code generates but the background colour does not change.

I am not sure if Codepen limits any Bootstrap or colour resources. I've tried using a non-bootstrap button and that doesn't do anything.

HTML from Codepen.io

<main>
  <div class="container">
    <div class="row max-height align-items-center">
    <div class="col-10 col-md-6 mx-auto text-center">
    <h1 class=text-uppercase>hex color :<span id="hex-value"></span></h1>
    <a href="#" id="btn" class="btn btn-secondary text-uppercase">click me</a>
    </div>
    </div>
  </div>
</main>

JS Code running on Codepen.io

function chgBkg() { 

  const button = document.querySelector('#btn')
  const main = document.querySelector('main')
  const hexValues = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']
  const value = document.querySelector('#hex-value')

  button.addEventListener('click', changeHex)

  function changeHex() {
    let hex = '#'
  
    for (let i = 1; i < 6; i++) {
      const index = Math.floor(Math.random()*hexValues.length)
        hex += hexValues[index]
    }
      value.textContent = hex
      main.style.backgroundColor = hex
    } 
} 

chgBkg()

Answer 1

Why not try changing the anchor link to a button element? Since every time you clicked an anchor element without a link in it will automaticaly redirect to the same page that means the script will also refresh

Answer 2

感谢@sol，从let i = 1更改为let i = 0