如何在单击时将 HTML 中按钮的文本颜色更改为随机颜色？答案

【问题标题】：How do I change the text-color of a button in HTML to a random color upon clicking it?如何在单击时将 HTML 中按钮的文本颜色更改为随机颜色？
【发布时间】：2021-11-17 11:25:25
【问题描述】：

我试过以下代码：

<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.addEventListener('click', switchColor);
</script>

但按钮在单击时不会返回任何颜色。

非常感谢您提前回答我的问题

【问题讨论】：

标签： javascript html dom dom-events

【解决方案1】：

您需要将所选按钮的style 中的color 更改为生成的随机颜色。

changeButton.style.color = randomColor

<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
    console.log(randomColor);
}
changeButton.addEventListener('click', switchColor);
</script>

【讨论】：

【解决方案2】：

<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) + ')';
        // CHANGE THE TEXT COLOR
        document.getElementById("changeColor").style.color = randomColor;
    }
    changeButton.addEventListener('click', switchColor);
    </script>

【讨论】：

仅供参考：您已经可以访问this 或changeButton。无需再用getElementById查询DOM

【解决方案3】：

试试这个方法

您的代码丢失

changeButton.style.color = color;

var changeButton = document.getElementById('changeColor');

function random(min, max){
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function switchColor(){
    var color;
    color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) + ')';
    changeButton.style.color = color;
}
changeButton.addEventListener('click', switchColor);

button{ border: none; }

&lt;button id = "changeColor"&gt;Click here to change my color&lt;/button&gt;

【讨论】：

【解决方案4】：

为了更准确，试试这个

var changeButton = document.getElementById('changeColor');
changeButton.onclick= () => {
     var randomColor = 'rgb(' + Math.random()*255 + ',' + Math.random()*255 + ',' + Math.random()*255 + ')';
    changeButton.style.color = randomColor
}

&lt;button id = "changeColor"&gt;Click here to change my color&lt;/button&gt;

【讨论】：