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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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