I am trying to generate a random color every time I hover over my box. Now, it will only generate a random color one time.
Here is my Jquery: ;togetherjs=uB54KHo5BN
This is my code so far:
$(document).ready(function(){
var r = Math.floor(Math.random() * (255 - 0) + 0);
var g = Math.floor(Math.random() * (255 - 0) + 0);
var b = Math.floor(Math.random() * (255 - 0) + 0);
var color = "rgb("+r+","+g+","+b+")"
$("#container").hover(function(){
$(this).css("background-color", color);
}, function(){
$(this).css("background-color", color);
});
});
I am trying to generate a random color every time I hover over my box. Now, it will only generate a random color one time.
Here is my Jquery: https://jsfiddle/Mulk/q0hxw0yd/#&togetherjs=uB54KHo5BN
This is my code so far:
$(document).ready(function(){
var r = Math.floor(Math.random() * (255 - 0) + 0);
var g = Math.floor(Math.random() * (255 - 0) + 0);
var b = Math.floor(Math.random() * (255 - 0) + 0);
var color = "rgb("+r+","+g+","+b+")"
$("#container").hover(function(){
$(this).css("background-color", color);
}, function(){
$(this).css("background-color", color);
});
});
- 3 You have to put the code that generates the color inside the event handler – adeneo Commented Jul 3, 2016 at 23:09
-
2
out of curiosity why
(255 -0) + 0why not only255? – Imran Ali Commented Jul 3, 2016 at 23:11 - @ImranAli I agree with You. Nobody is mentioning this moment. So it's very sad that new generation of "developers" does not know elementary math. That's a shame! – num8er Commented Jul 3, 2016 at 23:53
4 Answers
Reset to default 5You just need to put the color generation INSIDE the hover() function, so that it generates a new color on each hover event: https://jsfiddle/q0hxw0yd/3/
$(document).ready(function(){
$("#container").hover(function(){
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
var color = "rgb("+r+","+g+","+b+")"
$(this).css("background-color", color);
});
});
Also: as users have mented, (255 - 0) + 0 is equivalent to 255... not sure why that was in the original code!
Here you are:
var color = "#" + Math.random().toString(16).slice(2, 8);
This help you :
<html>
<head>
</head>
<body>
<div id="container">This is Div</div>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").hover(function(){
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
var color = 'rgb(' + r + ',' + g + ',' + b + ')';
$(this).css("background-color",color);
})
});
</script>
</body>
</html>Check this 2 code examples that handles mouse events and changes both background and text colors to make it readable some ridiculous colors:
<style>
#container {
width: 300px; height: 300px;
text-shadow: 1px 0px 1px rgba(255, 255, 255, 1);
}
</style>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">This div reacts to mouse move</div>
<script>
$(function(){
var $container = $('#container');
$container.mousemove(function(){
var rgb = [
parseInt(Math.random() * 255),
parseInt(Math.random() * 255),
parseInt(Math.random() * 255)
]; // generating array of Red Green Blue numbers (will be used to change background color)
$container
.css('background-color', 'rgb(' + rgb.join(',') + ')')
.css('color', 'rgb(' + [255-rgb[0], 255-rgb[1], 255-rgb[2]].join(',') + ')');
});
});
</script>
<style>
#container {
width: 300px; height: 300px;
text-shadow: 1px 0px 1px rgba(255, 255, 255, 1);
}
</style>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">This div reacts to mouse move</div>
<script>
$(function(){
var $container = $('#container');
$container.hover(function(){
var rgb = [
parseInt(Math.random() * 255),
parseInt(Math.random() * 255),
parseInt(Math.random() * 255)
];
$container
.css('background-color', 'rgb(' + rgb.join(',') + ')')
.css('color', 'rgb(' + [255-rgb[0], 255-rgb[1], 255-rgb[2]].join(',') + ')');
});
});
</script>