如何让下划线在每次页面加载时都改变颜色？

.underline {
  border-bottom: 1px solid #000; /* 初始颜色为黑色 */
}

<p class="underline">这是一个带下划线的文本。</p>

window.addEventListener('load', function() {
  var underlineElements = document.getElementsByClassName('underline');
  
  // 生成随机颜色
  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
  
  // 改变下划线颜色
  function changeUnderlineColor() {
    for (var i = 0; i < underlineElements.length; i++) {
      var underlineElement = underlineElements[i];
      var color = getRandomColor();
      underlineElement.style.borderBottomColor = color;
    }
  }
  
  // 页面加载时改变下划线颜色
  changeUnderlineColor();
});