HTML中点击按钮时如何将按钮文字颜色改为随机颜色？

你的代码仅完成了随机RGB颜色值的生成逻辑，没有将生成的颜色值绑定到按钮的文字样式属性上，因此点击后没有可见的变色效果。

修复后完整代码 #

<button id="changeColor">Click here to change my color</button>
<script>
var changeButton = document.getElementById('changeColor');

function random(number){
  return Math.floor(Math.random()*number);
}

function switchColor(){
    var randomColor = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
    // 新增逻辑：将随机颜色赋值给按钮的文字颜色样式
    changeButton.style.color = randomColor;
}
changeButton.addEventListener('click', switchColor);
</script>

补充说明 #

DOM元素的文字显示颜色由style.color属性控制，你只需要把生成的RGB颜色字符串赋值给对应元素的该属性，就能实现可见的变色效果。你也可以根据需求将var替换为const等现代JS变量声明方式，或者用模板字符串简化RGB颜色拼接逻辑，都不影响核心功能运行。

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