如何无需按钮实现点击链接时随机更改链接颜色？

完全可以实现，不用额外按钮，直接给链接绑定点击事件即可。以下是完整的实现方案：

调整后的HTML #

<div class="heading">                  
    <div id="link"><a id="nameLink">My Name</a></div>
    <div class="pro">My Career</div>
</div>

JavaScript 实现逻辑 #

// 获取目标链接元素
const nameLink = document.getElementById('nameLink');

// 生成随机十六进制颜色的工具函数
function getRandomColor() {
  // 生成0-255区间的随机数，转十六进制后补零确保两位长度
  const r = Math.floor(Math.random() * 256).toString(16).padStart(2, '0');
  const g = Math.floor(Math.random() * 256).toString(16).padStart(2, '0');
  const b = Math.floor(Math.random() * 256).toString(16).padStart(2, '0');
  return `#${r}${g}${b}`;
}

// 给链接绑定点击事件
nameLink.addEventListener('click', function(e) {
  // 如果后续给链接加了href属性，这行可以阻止默认跳转行为，只保留颜色变化
  e.preventDefault();
  // 修改链接文字颜色为随机值
  this.style.color = getRandomColor();
});

补充说明 #

• 给<a>标签添加id="nameLink"是为了让JS能精准定位到目标元素
• 随机颜色函数覆盖了所有RGB色域，每次点击都会生成完全随机的颜色
• 若不需要阻止链接跳转（比如没有设置href），可以删掉e.preventDefault()这一行

内容的提问来源于stack exchange，提问作者bahati