Related to quote project

Dear friends,

In this project I want to change background color to a random color with animated change whenever I click the button however my code doesn’t respond correctly when I click the button

HTML code

new quote
The message will go here

JavaScript code

function randColor()
{
return “RGB(”+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
}

$(document).ready(function(){
$(“body”).css(“background-color”,randColor);
$( “#getMessage” ).click(function() {
$(“body”).animate({
backgroundColor: “rgb( 20, 20, 20 )”
});
});
});

Do you have jQuery UI included?

From http://api.jquery.com/animate/

Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

hello @jx2bandito

Yes I have JQuery UI added however it is still not responding

“RGB(”+Math.floor(Math.random()255)+","+Math.floor(Math.random()255)+","+Math.floor(Math.random()*255)+")";

You’re missing asterisks between Math.random() and 255

hello friend

It is not showed correctly on the forum however it is correct in the code and generating the color successfully

the main issue is here

$( “#getMessage” ).click(function() {
$(“body”).animate({
backgroundColor: “rgb( 20, 20, 20 )”
});

it is not conducting the animate action

I plugged it into a pen and it works perfectly so it’s definitely not the code.

Maybe it’s something in your HTML?

1 Like

Thanks so much @jx2bandito that was really helpful