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（）函数。

JS：

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功能中返回颜色，并将其设置为按钮的背景和文字。

像这样：

＆＃13;

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 );
}

＆＃13;

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

＆＃13;

Answer 4

1 - 只需从onclick代码

更改删除<button>属性即可

<button id="buttonB" class="button">
     click to change
</button>

2-添加点击事件处理程序

$("#buttonB").on('click',function(){
    var new_color = getRandomColor();
    $(this).css("background-color", new_color);
    $(this).text('bg color: '+new_color);
});

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

4 个答案: