Ändere die Hintergrundfarbe des Körpers jedes Mal, wenn div geklickt wird

Question

Wenn der Knopf div angeklickt wird, möchte ich den Körper in eine zufällige Farbe im "colors" -Array ändern. Dieser Code funktioniert, aber er funktioniert nur, wenn ich das erste Mal klicke. Was kann ich ändern, damit der Körper die Farbe jedes Mal ändert, wenn das Div angeklickt wird?

var colors = ["#3b609b", "#9b3b3b", "#3b9b81", "#7da5a4"]; 
var rand = Math.floor(Math.random() * colors.length); 

$(".button").click(function() { 
    $("body").css("background-color", colors[rand]); 
}) 

Answer 1

In Ihrem Code, der Wert rand Variable bleibt für jeden Klick gleich.

Sie müssen diesen Wert bei jedem Klick aktualisieren, also setzen Sie diese Codezeile var rand = Math.floor(Math.random() * colors.length) in Click-Handler.

var colors = ["#3b609b", "#9b3b3b", "#3b9b81", "#7da5a4"]; 
 

 

 
$(".button").click(function() { 
 
    var rand = Math.floor(Math.random() * colors.length); 
 
    $("body").css("background-color", colors[rand]); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Gaurav</h1> 
 
<button class="button"> Change Color</button>