将变量作为文本放在按钮上，当我单击该按钮时

Question

所以我有一个颜色随机化按钮背景颜色。我试图将从变量color返回的颜色作为文本放在按钮上。我也希望这发生在点击。

示例:我点击按钮，随机设置一个颜色按钮的背景色。那个颜色是#ff0000。我想让按钮说出这样的话：

“这个按钮的背景色是x”

其中x是准确的颜色作为背景，但在文本。

这是我的js：

    function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color='#';
    for (var i = 0; i<6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;


}

function setRandomColor(){
    $("#buttonB").css("background-color", getRandomColor())

}

下面是我在html中的内容：

<div>
        <button id="buttonB" class="button" onclick="setRandomColor();">


        </button>
    </div>

我也有它的jquery库。

Answer 1

获取getRandomColor()的结果，并将其保存到一个变量中，并应用于两个位置:文本和css。

这只会改变setRandomColor()函数。

联署材料：

function setRandomColor(){
    var color = getRandomColor()
    $("#buttonB").css("background-color", color)
    $("#buttonB").html("Button color: "+color)
}

Answer 2

尝尝这个

function setRandomColor(){
    var color = getRandomColor();
    $("#buttonB").css("background-color", color).html("The background color of this button is " + color);
}

Answer 3

您只需将getRandomColor函数返回的颜色设置为按钮的背景和文本即可。

如下所示：

​

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color='#';
    for (var i = 0; i<6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    
    return color;


}

function setRandomColor(){
    var color = getRandomColor();
    $("#buttonB").css("background-color", color );
    $("#buttonB").text("My color is " + color );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>  
      <button id="buttonB" class="button" onclick="setRandomColor();">
        Click me!
      </button>
  </div>

​