Background color random change

Hi there,
My client wants the background color of the website to change randomly when a visitor clicks on a page in the menu. She wants 8 different, specified colors, to be randomly applied.
I found this link: https://teamtreehouse.com/community/random-background-color

My questions are: is this code OK to use and should I add it to theme functions.php file?
Any other advices and/or experiences to share with me?

Thanks in advance, best regards,
Ronald

  • Patrick

    Hi there Ronald

    I hope you're well today!

    Yep, the code a few replies down on that article works just fine. Add this just before the closing head tag in your theme's header.php, and change the colors to the ones you want:

    <script type="text/javascript">
    function ran_col() { //function name
        var color = '#'; // hexadecimal starting symbol
        var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here
        color += letters[Math.floor(Math.random() * letters.length)];
        document.getElementsByClassName('site-header-main')[0].style.background = color;
    }
    </script>

    Then add this to the opening body tag just after the closing head tag:

    onload="return ran_col()"

    So your body tag would look like this:

    <body onload="return ran_col()" >

    Depending on the theme you are using, there may be other things declared in the body tag. If there are, leave them in there in too. For example, the body tag in the Twenty-Sixteen theme would look like this:

    <body onload="return ran_col()" <?php body_class(); ?>>

  • Patrick

    Hi again Ronald
    I see in the source code for your page that you have added the script & tag in the correct places.

    But, oops, I neglected to mention that you need to specify the container class, ID or tag in the script where you want the background color to change.

    For example, if you want the background color of the nav menu to change, this is the code you need (note the use of getElementById instead of getElementsByClassName:

    <script type="text/javascript">
    function ran_col() { //function name
        var color = '#'; // hexadecimal starting symbol
        var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here
        color += letters[Math.floor(Math.random() * letters.length)];
        document.getElementById('nav-container')[0].style.background = color;
    }
    </script>

    If you want the background color of the body to change, this is the code you need (note the use of getElementsByTagName instead of getElementsByClassName:

    <script type="text/javascript">
    function ran_col() { //function name
        var color = '#'; // hexadecimal starting symbol
        var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here
        color += letters[Math.floor(Math.random() * letters.length)];
        document.getElementsByTagName('body')[0].style.background = color;
    }
    </script>

    You can see it working on a test site here as the header background color changes randomly with every page load: http://pcwriter.biz/

    For more on how to target specific elements in your scripts, see: https://www.w3schools.com/js/js_htmldom_elements.asp