Why can't I set the header background to a hex value?

Question

So originally I wanted to set the header background to red for two seconds when one of the nav buttons was clicked. Now I want to change it to a random color for two seconds every time a nav button is clicked. So I created a random hex value. but when I try to set it using

header.style.background = hexColor;

It won't work?

header.style.background = 'red';

this will work, or if hexColor = 'red' will work. I can even log hexColor and see the hex value. What's the issue?

 const navLinks = document.querySelectorAll('.nav-links .link'); const linksArray = Array.from(document.querySelectorAll('.links a')); const header = document.querySelector('header'); for (var i = 0; i < navLinks.length; i++) { navLinks[i].addEventListener('click', changeColor); } for (var i = 0; i < linksArray.length; i++) { linksArray[i].addEventListener('click', shuffle); } function changeColor() { let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F']; let hexColor = '#'; for(let i = 0; i <= 6; i++) { let random = Math.floor(Math.random()*hexArray.length); hexColor += hexArray[random]; } header.style.background = hexColor; setTimeout(function() { header.style.backgroundImage = 'url(img/canada.jpeg)'; }, 2000); } function shuffle() { // Fisher-Yates shuffle algorithm for (let i = linksArray.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i [linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML]; // swap elements } } 

 html, body { margin: 0; padding: 0; } body { font-family: 'Verdana'; box-sizing: border-box; color: #63889b; } /** { outline: 1px solid red; }*/ /*------NAV-----*/ nav { display: flex; justify-content: space-between; font-size: 1.8rem; padding: 25px 0; position: fixed; background-color: #fff; width: 100%; top: 0; left: 0; right: 0; z-index: 10; } .brand, .nav-links { display: flex; align-items: center; } .brand { margin-left: 6%; } .logo { max-width: 70px; max-height: 45px; margin-right: 25px; } .nav-links { position: relative; margin-right: 6%; } .nav-links .link { text-transform: uppercase; margin-right: 20px; cursor: pointer; transition: all .2s ease; } .nav-links .link:hover { color: #014263; } /*-----HEADER-----*/ header { margin-top: 92px; background-image: url(img/canada.jpeg); /*background-position: center; background-size: cover;*/ padding-top: 7%; padding-bottom: 25%; } .header-info { color: #fff; font-size: 1.5rem; width: 26%; background-color: rgba(0,0,0,0.6); padding: 25px 0 25px 55px; margin-left: 10%; } header p { margin: 8px; } /*-----MAIN-----*/ main { display: flex; background-color: #fff; } .col { flex-basis: 33.33%; padding: 50px 0; } .col p { width: 65%; font-size: 1.25rem; text-align: center; margin-left: auto; margin-right: auto; } .col img { display: block; margin: 0 auto; } .col-3 img { width: 280px; height: 155px; } .col-3 img, .col-3 h3, .col-3 p { position: relative; top: -8px; } .col-2 img, .col-2 h3, .col-2 p { position: relative; top: 30px; } .col-1 { margin-left: 7%; } .col-3 { margin-right: 7%; } h3 { text-align: center; } /*------FOOTER-----*/ footer { font-family: 'Helvetica'; background-color: #63889b; display: flex; justify-content: space-between; color: #fff; padding-bottom: 30px; } .internal-links { padding-left: 20%; font-size: 1.5rem; } a { text-decoration: none; margin:2px 0; color: #fff; cursor: pointer; } .internal-links h4 { text-decoration: underline; text-align: center; margin-bottom: 8px; margin-top: 30PX; color: #fff; } .links { font-size: 1.2rem; display: flex; flex-direction: column; } .form-wrap { padding-top: 30px; display: flex; align-items: flex-end; flex-basis: 50%; } form { margin: 0 auto; display: flex; flex-direction: column; width: 80%; } input { border: none; outline: none; font-size: 1.6rem; } label { font-size: 1.3rem; padding: 3px 0; } button { margin-top: 20px; border: 1px solid #fff; width: 50%; font-size: 1.3rem; background-color: #1090d1; align-self: flex-end; color: #fff; padding: 4px 30px; } body { background-color: rgba(0,0,0,0.6); position: absolute; left: 0; right: 0; bottom: 0; top: 0; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chapman Automotive Skills Assessment</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <div class="brand"> <img src="img/Logo.png" alt="logo" class="logo"> <div class="comp-name">CHAPMAN</div> </div> <div class="nav-links"> <div class="link">Home</div> <div class="link">Sales</div> <div class="link">Blog</div> <div class="link">Login</div> </div> </nav> <header> <div class="header-info"> <p>We are a company that does stuff.</p> <p>Car and web stuff.</p> </div> </header> <main> <div class="col col-1"> <img src="img/car1.jpg" alt="car1"> <h3>Some Header</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p> </div> <div class="col col-2"> <img src="img/car2.jpg" alt="car2"> <h3>More Stuff</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p> </div> <div class="col col-3"> <img src="img/car3.jpg" alt="car3"> <h3>Last Column</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p> </div> </main> <footer id="footer"> <div class="internal-links"> <h4>Internal Links</h4> <div class="links"> <a href="#footer">Page One</a> <a href="#footer">Another Page</a> <a href="#footer">Sales Page</a> <a href="#footer">Page Three</a> <a href="#footer">Keep Going</a> <a href="#footer">Last One</a> <a href="#footer">Just Kidding</a> </div> </div> <div class="form-wrap"> <form> <label for="Name">Name</label> <input type="text" id="Name"> <label for="Name">Address</label> <input type="text" id="Address"> <label for="Name">City</label> <input type="text" id="City"> <button type="submit">Submit Form</button> </form> <div class="dialog-wrap"> <dialog close> <div class="name-field">Name:<span class="name">Seth</span></div> <div class="name-field">Address:<span class="address">1013 N Arvada</span></div> <div class="name-field">City:<span class="city">Mesa</span></div> </dialog> </div> </footer> <script src="script.js"></script> </body> </html> 

Answer 1

Inside your change color function you have a for loop that stops after 7 values are appended.

Change for loop to i < 6 or i <= 5.

 const navLinks = document.querySelectorAll('.nav-links .link'); const linksArray = Array.from(document.querySelectorAll('.links a')); const header = document.querySelector('header'); for (var i = 0; i < navLinks.length; i++) { navLinks[i].addEventListener('click', changeColor); } for (var i = 0; i < linksArray.length; i++) { linksArray[i].addEventListener('click', shuffle); } function changeColor() { let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F']; let hexColor = '#'; for(let i = 0; i <= 5; i++) { let random = Math.floor(Math.random()*hexArray.length); hexColor += hexArray[random]; } header.style.background = hexColor; setTimeout(function() { header.style.backgroundImage = 'url(img/canada.jpeg)'; }, 2000); } function shuffle() { // Fisher-Yates shuffle algorithm for (let i = linksArray.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i [linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML]; // swap elements } } 

 html, body { margin: 0; padding: 0; } body { font-family: 'Verdana'; box-sizing: border-box; color: #63889b; } /** { outline: 1px solid red; }*/ /*------NAV-----*/ nav { display: flex; justify-content: space-between; font-size: 1.8rem; padding: 25px 0; position: fixed; background-color: #fff; width: 100%; top: 0; left: 0; right: 0; z-index: 10; } .brand, .nav-links { display: flex; align-items: center; } .brand { margin-left: 6%; } .logo { max-width: 70px; max-height: 45px; margin-right: 25px; } .nav-links { position: relative; margin-right: 6%; } .nav-links .link { text-transform: uppercase; margin-right: 20px; cursor: pointer; transition: all .2s ease; } .nav-links .link:hover { color: #014263; } /*-----HEADER-----*/ header { margin-top: 92px; background-image: url(img/canada.jpeg); /*background-position: center; background-size: cover;*/ padding-top: 7%; padding-bottom: 25%; } .header-info { color: #fff; font-size: 1.5rem; width: 26%; background-color: rgba(0,0,0,0.6); padding: 25px 0 25px 55px; margin-left: 10%; } header p { margin: 8px; } /*-----MAIN-----*/ main { display: flex; background-color: #fff; } .col { flex-basis: 33.33%; padding: 50px 0; } .col p { width: 65%; font-size: 1.25rem; text-align: center; margin-left: auto; margin-right: auto; } .col img { display: block; margin: 0 auto; } .col-3 img { width: 280px; height: 155px; } .col-3 img, .col-3 h3, .col-3 p { position: relative; top: -8px; } .col-2 img, .col-2 h3, .col-2 p { position: relative; top: 30px; } .col-1 { margin-left: 7%; } .col-3 { margin-right: 7%; } h3 { text-align: center; } /*------FOOTER-----*/ footer { font-family: 'Helvetica'; background-color: #63889b; display: flex; justify-content: space-between; color: #fff; padding-bottom: 30px; } .internal-links { padding-left: 20%; font-size: 1.5rem; } a { text-decoration: none; margin:2px 0; color: #fff; cursor: pointer; } .internal-links h4 { text-decoration: underline; text-align: center; margin-bottom: 8px; margin-top: 30PX; color: #fff; } .links { font-size: 1.2rem; display: flex; flex-direction: column; } .form-wrap { padding-top: 30px; display: flex; align-items: flex-end; flex-basis: 50%; } form { margin: 0 auto; display: flex; flex-direction: column; width: 80%; } input { border: none; outline: none; font-size: 1.6rem; } label { font-size: 1.3rem; padding: 3px 0; } button { margin-top: 20px; border: 1px solid #fff; width: 50%; font-size: 1.3rem; background-color: #1090d1; align-self: flex-end; color: #fff; padding: 4px 30px; } body { background-color: rgba(0,0,0,0.6); position: absolute; left: 0; right: 0; bottom: 0; top: 0; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chapman Automotive Skills Assessment</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <div class="brand"> <img src="img/Logo.png" alt="logo" class="logo"> <div class="comp-name">CHAPMAN</div> </div> <div class="nav-links"> <div class="link">Home</div> <div class="link">Sales</div> <div class="link">Blog</div> <div class="link">Login</div> </div> </nav> <header> <div class="header-info"> <p>We are a company that does stuff.</p> <p>Car and web stuff.</p> </div> </header> <main> <div class="col col-1"> <img src="img/car1.jpg" alt="car1"> <h3>Some Header</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p> </div> <div class="col col-2"> <img src="img/car2.jpg" alt="car2"> <h3>More Stuff</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p> </div> <div class="col col-3"> <img src="img/car3.jpg" alt="car3"> <h3>Last Column</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p> </div> </main> <footer id="footer"> <div class="internal-links"> <h4>Internal Links</h4> <div class="links"> <a href="#footer">Page One</a> <a href="#footer">Another Page</a> <a href="#footer">Sales Page</a> <a href="#footer">Page Three</a> <a href="#footer">Keep Going</a> <a href="#footer">Last One</a> <a href="#footer">Just Kidding</a> </div> </div> <div class="form-wrap"> <form> <label for="Name">Name</label> <input type="text" id="Name"> <label for="Name">Address</label> <input type="text" id="Address"> <label for="Name">City</label> <input type="text" id="City"> <button type="submit">Submit Form</button> </form> <div class="dialog-wrap"> <dialog close> <div class="name-field">Name:<span class="name">Seth</span></div> <div class="name-field">Address:<span class="address">1013 N Arvada</span></div> <div class="name-field">City:<span class="city">Mesa</span></div> </dialog> </div> </footer> <script src="script.js"></script> </body> </html>