stackoom
  简体   繁体   中英

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

 原文  2019-06-08 00:14:18  6   1    javascript/ html/ css/ arrays/ ecmascript-6

Question

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"> <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> </footer> <script src="script.js"></script> </body> </html>

1 answers

solution1
 0  2019-06-08 00:22:32

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"> <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> </footer> <script src="script.js"></script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question can I use array.indexOf() with a function like .map() Why should I use 'i in array' inside my own custom 'array.indexOf'? Why array.indexOf(undefined) doesn't work if array is sparse Why Array.indexOf doesn't find identical looking objects use Array.indexOf for relatively big arrays Array.indexOf is not a function Array.indexOf or between? array.indexOf is just -1 Is it possible to use `array.indexOf` passing as `searchElement` an object? Is it possible to use switch case for more than one array.indexOf
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM