2

I want to change the background colour once the user refresh the page

Saif Abushama
  • 73
  • 1
  • 6
  • 3
    You should try first, and get back to us with the code samples if some plan you had didn't work as intended. – doldt Jun 09 '15 at 07:42
  • possible duplicate of [Random Background Color Change](http://stackoverflow.com/questions/21034047/random-background-color-change). Same thing, just need to change it from `.click` to when the page loads. – Ruddy Jun 09 '15 at 07:45
  • 2
    Downvoted, because you have shown absolutely no intention to find out anything yourself. Please come back with code samples, and where you've gotten stuck. SO is not meant to do your work for you. – Mave Jun 09 '15 at 07:48
  • Anyway thank you for your help! – Saif Abushama Jun 09 '15 at 08:18

4 Answers4

5

You can do it by jQuery, Please check the code below :

$(document).ready(function() {
var randomColor = Math.floor(Math.random()*16777215).toString(16);
    $("#background").css("background-color", '#' + randomColor);
});
Alaa Mohammad
  • 666
  • 1
  • 6
  • 20
5

<html>
<head>
<script type="text/javascript">
 function func()
 {
  //alert(getRandomColor());
  document.body.style.backgroundColor = getRandomColor();
 }
 
function getRandomColor() {
    var letters = "0123456789ABCDEF".split('');
    var color = "#";
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
</script>
</head>
<body onload="func()">

</body>
</html>
Uma Kanth
  • 5,659
  • 2
  • 20
  • 41
4

You have to create a function for that which runs on document ready as:

<script type="text/javascript>
    $(document).ready(function() {
    var random_color = get_random_color();
        $("#background").css("background-color", random_color);
    });
    function get_random_color() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
</script>
sonam gupta
  • 775
  • 6
  • 17
0

JavaScript:

<div id="backgroundsection">
    <button id="buttonClick">Change color</button>
    <h4>HEX Color:<span class="texthex"></span></h4>
</div>

<style>
    #backgroundsection {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        background-color: #000000;
        height: 100px;
    }
</style>

<script>
    const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F']; //array of all hex color values
    const textColor = document.querySelector(".texthex") //find an element for the subsequent replacement of the text in it with the current hex color
    const buttonClick = document.getElementById("buttonClick"); //color change button

    buttonClick.addEventListener("click", function () { //click event
       let colorhex = "#"; // a variable that will contain a hex color
        for(let i=0; i<6; i++) { //a loop that creates 6 values
            colorhex += hex[rundomnumber()];
        }
        textColor.textContent = colorhex; //substitute the current hex color value in span class="texthex"
        document.body.style.backgroundColor = colorhex; //change the body color
    });
    
    function rundomnumber() { 
        return Math.floor(Math.random() * hex. length); //a function that creates a random value from an array "hex"
    }


</script>
mickeybroud
  • 1
  • 1
    Welcome to Stackoverflow. Do not post an answer with merely codes. While your solution can be useful, you should also explain why the code will fix the problem that was described in the question and as this question is more than 7 years old and has an accepted answer what is the advantage of your answer to the others – MD Zand Dec 02 '22 at 19:06