Nomuarch Posted April 13, 2022 Share Posted April 13, 2022 Site URL: https://commercial.jrbullock.com/ Greetings, I am trying to have a different header colour each time the page loads. I have patched this code together from a few sources. I am using an array for the colours. I think I am close to a solution but I have run out of knowledge. <script type="text/javascript"> //colour change on refresh var colorArray = ["#003D44", "#096570", "#164487", "#FFFF99", "#2252A0", "#72220D"]; const headerr = document.querySelector('.header-announcment-bar-wrapper') function getRandomColor() { return colorArray[Math.random() * colorArray.length | 0]; } console.log(getRandomColor()); window.addEventListener('load', ()=> { headerr.style.backgroundColor * getRandomColour }); </script> Any help would be greatly appreciated. Link to comment
Beyondspace Posted April 13, 2022 Share Posted April 13, 2022 4 hours ago, Nomuarch said: Site URL: https://commercial.jrbullock.com/ Greetings, I am trying to have a different header colour each time the page loads. I have patched this code together from a few sources. I am using an array for the colours. I think I am close to a solution but I have run out of knowledge. <script type="text/javascript"> //colour change on refresh var colorArray = ["#003D44", "#096570", "#164487", "#FFFF99", "#2252A0", "#72220D"]; const headerr = document.querySelector('.header-announcment-bar-wrapper') function getRandomColor() { return colorArray[Math.random() * colorArray.length | 0]; } console.log(getRandomColor()); window.addEventListener('load', ()=> { headerr.style.backgroundColor * getRandomColour }); </script> Any help would be greatly appreciated. Try <script> (function() { window.addEventListener('DOMContentLoaded', () => { const colorArray = ["#003D44", "#096570", "#164487", "#FFFF99", "#2252A0", "#72220D"]; const headerr = document.querySelector('.header-announcement-bar-wrapper'); if(headerr) { const colorRandom = Math.floor(Math.random() * colorArray.length); console.log(colorArray[colorRandom]); headerr.style.backgroundColor = colorArray[colorRandom]; } }); })() </script> Let me know how it works Support me by pressing 👍 if this useful for you tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Nomuarch Posted April 19, 2022 Author Share Posted April 19, 2022 I have used this answer provided from a different site: <script type="text/javascript"> // Randomly set background color of Announcement Bar Wrapper. const headerABW = document.querySelector('.header-announcement-bar-wrapper'); const colorArray = ["#003D44", "#096570", "#164487", "#FFFF99", "#2252A0", "#72220D"]; headerABW.style.backgroundColor = colorArray[Math.floor(Math.random() * colorArray.length)]; </script> Thanks to all who have answered here. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment