We Keep Coding

Why doesn't my accordion toggle when clicking on the heading icons?

Need some assistance with below accordion. When you click on the heading the accordion drops down, which is great and works well. However, when you click on the + / - the accordion doesn't dropdown. Not sure how to fix this and would greatly appreciate if someone to help. Not entirely sure how to amend the before/after so it's clickable.
function initAcc(elem, option){
document.addEventListener('click', function (e) {
if (!e.target.matches(elem+' .a-btn')) return;
else{
if(!e.target.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
e.target.parentElement.classList.add('active');
}else{
e.target.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>

Adding pointer-events:none to your span will work for you like so :-
function initAcc(elem, option){
document.addEventListener('click', function (e) {
if (!e.target.matches(elem+' .a-btn')) return;
else{
if(!e.target.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
e.target.parentElement.classList.add('active');
}else{
e.target.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
pointer-events:none;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>
Explanation - Did this because your e.target needs to match with a specific selector but your e.target will vary based on where you click and it becomes this span when you click on the +/- icons. So I have prevented the pointer-events for that span. I like the closest approach as well by #espascarello.

The target is what you clicked. The + is not the element you are looking for, so you got to see if it is a child. Easiest way is closest.
function initAcc(elem, option){
document.addEventListener('click', function (e) {
const clickedElem = e.target.closest(elem+' .a-btn');
if (!clickedElem) return;
else{
if(!clickedElem.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
clickedElem.parentElement.classList.add('active');
}else{
clickedElem.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>

What element can make the background:url(); to not display image

I am trying to add the following effect in one of the divs of my website:
https://www.youtube.com/watch?v=o8DTzU0Iol8
I have done everything from the video, yet the background images of .container_page_1 .column.active .bg.bg1 2,3, and 4 don't show up even with full path and the jQuery doesn't work as well.
I am sure that the thing that causes these issues is that I've added the code from the tutorial in a div that's not directly in the body, it's in other div, that's in another div.
I will paste all the code of the page, both HTML and CSS and also link a code pen, because I do not know what part of the code is faulty...
This is a live codepen: Codepen
I've separated my website into 3 pages. I've added a parallax effect on the first page and I've tried adding the effect from the video tutorial into the second page.
I also have a reset.css file that's just too big to add here. I've found it online. Without the reset.css the codepen will have a margin at the top through which you can see the background image that should have been on .container_page_1 .column.active .bg.bg1.
What do you think ?
$(document).on('mouseover', 'container_page_1 .column', function() {
$(this).addClass('active').siblings().removeClass('active');
})
// eliminate scroll-bar
var child = document.getElementById('child-container');
child.style.right = child.clientWidth - child.offsetWidth + "px";
/* *** index.html - START *** */
body, html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
}
#parent-container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#child-container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px; /* exact value is given through JavaScript */
overflow: auto;
scroll-snap-type: both proximity;
}
header {
height: 100%;
background-image: url("https://i.postimg.cc/V671cpsf/ps4-controller-min.jpg");
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
scroll-snap-align: center;
}
header h1 {
font-size: 32px;
font-weight: bold;
position: sticky;
top: 5%;
margin-bottom:10px;
}
header p {
position: sticky;
width: 450px;
text-align: center;
margin: auto;
margin-top: 100px;
}
.container_page_1 {
width: 100%;
height: 100vh;
/* background-color: red; */
scroll-snap-align: center;
overflow: hidden;
}
.container_page_1 .column {
width: 25%;
height: 100%;
float: left;
border-right: 2px solid rgba(0, 0, 0, 0.5);
box-sizing: border-box;
z-index: 1;
}
.container_page_1 .column:last-child {
border-right: none;
}
.container_page_1 .column .content {
position: relative;
height: 100%;
}
.container_page_1 .column .content h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
background: rgba(0, 0, 0, .1);
text-align: center;
margin: 0;
padding: 0;
color: rgba(255, 255, 255, .2);
font-size: 15em;
border-top: 2px solid rgba(0, 0, 0, 0.5);
border-bottom: 2px solid rgba(0, 0, 0, 0.5);
}
.container_page_1 .column .content .box {
position: absolute;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
padding: 40px;
background: rgba(255, 255, 255, 1);
text-align: center;
transition: 0.5s;
opacity: 0;
}
.container_page_1 .column.active .content .box {
opacity: 1;
}
.container_page_1 .column .content .box h2 {
margin: 0;
padding: 0;
font-size: 30px;
color: #262626;
}
.container_page_1 .column .content .box p {
color: #262626;
font-size: 18px;
}
.container_page_1 .column .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.container_page_1 .column.active .bg.bg1 {
background: url('https://i.postimg.cc/ZRYZ24Ss/ac-odyssey-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg2 {
background: url('https://i.postimg.cc/x8h2XmbB/borderlands-3-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg3 {
background: url('https://i.postimg.cc/1RjPCkYM/god-of-war-4-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg4 {
background: url('https://i.postimg.cc/qqzrBwg8/sw-jedi-fallen-order-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_2 {
width: 100%;
height: 100%;
background-color: green;
scroll-snap-align: center;
}
/* *** index.html - END *** */
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div id="parent-container">
<div id=child-container>
<header>
<a href="#page2">
<h1 id="sticky-title">ACG - Gaming and e-Sports News</h1>
</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi debitis in libero tenetur suscipit iusto eum nulla dolorum aperiam adipisci unde veritatis vel iure, a nam, saepe exercitationem illum vitae.</p>
</header>
<div id="page2" class="container_page_1">
<div class="column active">
<div class="content">
<h1>1</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg1"></div>
</div>
<div class="column">
<div class="content">
<h1>2</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg2"></div>
</div>
<div class="column">
<div class="content">
<h1>3</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg3"></div>
</div>
<div class="column">
<div class="content">
<h1>4</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg4"></div>
</div>
</div>
<div class="container_page_2">
</div>
</div>
</div>

Why Can't I use array.indexOf(this.innerHTML)?

So I have a list of links in the footer and I want to be able to click on a link and have it swapped out with the link on the top of the list, if it isn't there already. I'm so far able to move the link that is clicked on to the top, but I can't figure out how to move the top link to the position of the one that was clicked? I've tried using indexOf(this.innerHTML) but its saying its not a function.
EDIT: I've also tried nodeList.item() which also didn't work:(
const navLinks = document.querySelectorAll('.nav-links .link');
const footerLinks = 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 < footerLinks.length; i++) {
footerLinks[i].addEventListener('click', changePosition);
}
function changeColor() {
header.style.background = 'red';
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function changePosition() {
if(footerLinks[0] !== this) {
footerLinks[0].innerHTML = this.innerHTML;
// this.innerHTML = footerLinks[0].innerHTML;
}
console.log(footerLinks.indexOf(this.innerHTML));
}
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%;
transition: all .3s ease;
}
.header-info {
color: #fff;
font-size: 1.5rem;
width: 26%;
margin-left: 10%;
}
header p {
margin: 0;
background-color: rgba(0,0,0,0.6);
padding: 10px 25px;
}
header p:first-child {
padding-top: 25px
}
header p:last-child {
padding-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
}
.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;
color: #fff;
}
.links {
font-size: 1.3rem;
display: flex;
flex-direction: column;
}
.form-wrap {
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;
}
<!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">
Page One
Another Page
Sales Page
Page Three
Keep Going
Last One
Just Kidding
</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>
</footer>
<script src="script.js"></script>
</body>
</html>

querySelectorAll returns a static NodeList, which isn't an array. To convert it to an array, use spreading [...] It is a collection of HTML elements, so you need to use indexOf(this), not indexOf(this.innerHTML) (because it's not an array of strings).
const navLinks = document.querySelectorAll('.nav-links .link');
const footerLinks = 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 < footerLinks.length; i++) {
footerLinks[i].addEventListener('click', changePosition);
}
function changeColor() {
header.style.background = 'red';
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function changePosition() {
if (footerLinks[0] !== this) {
footerLinks[0].innerHTML = this.innerHTML;
// this.innerHTML = footerLinks[0].innerHTML;
}
console.log([...footerLinks].indexOf(this));
}
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%;
transition: all .3s ease;
}
.header-info {
color: #fff;
font-size: 1.5rem;
width: 26%;
margin-left: 10%;
}
header p {
margin: 0;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 25px;
}
header p:first-child {
padding-top: 25px
}
header p:last-child {
padding-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
}
.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;
color: #fff;
}
.links {
font-size: 1.3rem;
display: flex;
flex-direction: column;
}
.form-wrap {
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;
}
<!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">
Page One
Another Page
Sales Page
Page Three
Keep Going
Last One
Just Kidding
</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>
</footer>
<script src="script.js"></script>
</body>
</html>

How to make the picture in the background change with the main slider?

There is a usual slider with text information. How to make so that when changing the slide with the text the background picture itself also changes? How to implement this? I use slick-slider. But the text "static text here" with a white background should not change with the slider. It is important. I am interested in this implementation and its possibility in principle.
$('.js-slider').slick({
appendArrows:$('.head-slider .js-arrows'), // Class For Arrows Buttons
prevArrow:'<span class="arrow arrow_prev arrow_lg"></span>',
nextArrow:'<span class="arrow arrow_next arrow_lg"></span>',
autoplay: true,
autoplaySpeed: 2000,
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
}
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
}
.wrap {
height: 100vh;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
}
.head-slider {
max-width: 786px;
width: 100%;
position: relative;
background: rgba(195, 158, 158, 0.7);
margin: auto 0;
}
.head-slider p {
font-size: 20px;
line-height: 28px;
max-height: 165px;
overflow: hidden;
}
.arrows {
position: absolute;
top: 48px;
right: 40px;
z-index: 10;
}
.arrows_main {
top: inherit;
right: 0;
}
.slider-item {
margin: 55px;
min-height: 342px;
max-height: 342px;
overflow: hidden;
}
.arrow {
display: inline-block;
width: 40px;
height: 40px;
position: relative;
cursor: pointer;
}
.arrow:after {
content: "";
display: inline-block;
vertical-align: middle;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 8px;
height: 8px;
border-top: 2px solid #c96217;
border-right: 2px solid #c96217;
transition: transform 0.5s;
}
.arrow_next:after {
transform: rotate(45deg);
}
.arrow_prev:after {
transform: rotate(225deg);
}
.text {
background: #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="wrap" style="background-image: url(https://images.unsplash.com/photo-1539567601-bf304c363f16?ixlib=r0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7aee0ae43485302fd9e03461549a1459&auto=format&fit=crop&w=3891&q=80)">
<div class="head-slider">
<div class="arrows arrows_main js-arrows"></div>
<div class="slider js-slider">
<div class="slider-item">
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus soluta inventore nisi tempore! In deleniti nobis, incidunt doloremque quia labore vero odio, accusantium laborum, necessitatibus perspiciatis minima esse itaque! Fuga, dolore animi esse voluptatibus recusandae assumenda sed praesentium eos ex!
</p>
</div>
<div class="slider-item">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe porro qui sint, obcaecati eius excepturi! Cumque accusamus numquam maiores dolorum quaerat suscipit cum placeat praesentium.</p>
</div>
<div class="slider-item">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quasi.</p>
</div>
</div>
</div>
<div class="text">
static text here
</div>
</div>

Good question Dan,
One way to handle this is by placing a "cover" over your slider. Use absolute positioning to place a div over your slider. Then, you can place text in front of the slider, while having the slider rotate images in the background.
I went ahead and added a snippet to make my answer more clear.
https://codepen.io/jacobshenning/pen/qJVMQa
HTML
<div class="container">
<div class="cover">
Cover Text
</div>
<div class="slider">
<div id="ImageOne"></div>
<div id="ImageTwo"></div>
<div id="ImageThree"></div>
</div>
</div>
CSS
.container {
height: 600px;
width: 400px;
}
.cover {
color: white;
position: absolute;
padding: 20px;
font-size: 24px;
z-index: 100;
}
#ImageOne {
background-image: url('http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg');
background-size: cover;
min-height: 300px;
}
#ImageTwo {
background-image: url('http://gbaproducts.com/wp-content/uploads/2017/11/img-placeholder-dark-vertical.jpg');
background-size: cover;
min-height: 300px;
}
#ImageThree {
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHdqxo4BzJeS6EZkWzm9lqnmikKnGUXBsTAm1V55j3IWAfMn2daQ');
background-size: cover;
min-height: 300px;
}
JS
$(document).ready(function(){
$('.slider').slick();
});

Make button go along with dropdown's animation height change

So, I have a question here. I want to do a simple dropdown animation where I have this button at the bottom of the div's original height. When I toggle a class, div's height changes, and I want the button to always stay at the bottom. How do I do that? Code is right here:
var btn = document.getElementById("btn");
var div = document.getElementById("div");
function dropDownAnimation(){
div.classList.toggle("dropdown");
}
btn.onclick = dropDownAnimation
.div {
background-color: gray;
font-family: Arial;
font-size: 18px;
width: 150px;
transition: 500ms ease;
}
.div > button {
width: 50px;
height: 50px;
font-size: 10px;
}
.dropdown {
height: 300px;
}
#btn {
margin-top: 15px;
}
<div class="div" id="div">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quasi pariatur illo earum excepturi ipsam.
<button>Make me stay at bottom!</button>
</div>
<button id="btn">Press me for dropdown</button>
No jQuery answers please.

var btn = document.getElementById("btn");
var div = document.getElementById("div");
function dropDownAnimation(){
div.classList.toggle("dropdown");
}
btn.onclick = dropDownAnimation
.div {
position:relative;
padding-bottom:50px;
background-color: gray;
font-family: Arial;
font-size: 18px;
width: 150px;
transition: 500ms ease;
}
.div > button {
position: absolute;
left: 0%;
bottom: 0%;
width: 50px;
height: 50px;
font-size: 10px;
}
.dropdown {
height: 300px;
}
#btn {
margin-top: 15px;
}
<div class="div" id="div">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quasi pariatur illo earum excepturi ipsam.
<button>Make me stay at bottom!</button>
</div>
<button id="btn">Press me for dropdown</button>

As #Nishant code snippet shows, You don't need JavaScript to do so, only add this to your main div
position: relative;
and this to your button
position: absolute;
left: 0;
bottom: 0;

var btn = document.getElementById("btn");
var div = document.getElementById("div");
var sty = document.getElementById("sty");
function dropDownAnimation(){
div.classList.toggle("dropdown");
sty.classList.toggle('btn_margin');
}
btn.onclick = dropDownAnimation
.div {
position:relative;
background-color: gray;
font-family: Arial;
font-size: 18px;
width: 150px;
transition: 500ms ease;
}
.div > button {
position:relative;
width: 50px;
height: 50px;
font-size: 10px;
}
.dropdown {
height: 300px;
}
.btn_margin{
margin-top:67%;
}
<div class="div" id="div">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quasi pariatur illo earum excepturi ipsam.
<button id="sty">Make me stay at bottom!</button>
</div>
<button id="btn">Press me for dropdown</button>
I think It will help. thanks