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

Posted 2023-02-21

【中文标题】如何在单击时将 HTML 中按钮的文本颜色更改为随机颜色？

【英文标题】：How do I change the text-color of a button in HTML to a random color upon clicking it?

【发布时间】：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>

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

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

【参考方案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; 

<button id = "changeColor">Click here to change my color</button>

【参考方案4】：

为了更准确，试试这个

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

<button id = "changeColor">Click here to change my color</button>