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

Question

我试过以下代码：

<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>

但是按钮在单击时 return 没有任何颜色。

非常感谢您回答我的问题

Answer 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>

Answer 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>

Answer 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>

Answer 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>

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

How do I change the text-color of a button in HTML to a random color upon clicking it?

html

javascript

dom

dom-events