Help! Works in vscode and chrome, but I cant make it work here.

Question

/**I thought this was going to straight forward and easy, but I cant make it work. I cannot select only the links in the nav with what was covered in the course.(If you can I have no idea how.) I love to solve things by myself, but this is taking way too long. I have looked at other sources and came up with what I have below. Like I mentioned in the title, it works in vscode and chrome, but I cant make it work here. I am able to select the three link tags on my machine but when I apply this to the course code it does not work.**/

// index.html
<ul id = 'ulTagOne'>
    <li><a href="index.html" class="selected">Portfolio</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

// app.js
const ulTagOne = document.getElementById('ulTagOne');
let navigationLinks = ulTagOne.getElementsByTagName('li');

for (let i = 0; i < navigationLinks.length; i++) {
   navigationLinks[i].style.color = 'orange'; // for testing only
}

js/app.js

const ulTagOne = document.getElementById('ulTagOne');
let navigationLinks = ulTagOne.getElementsByTagName('a');
let galleryLinks;
let footerImages;

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul id = 'ulTagOne'>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Nick Pettit.</p>
      </footer>
    </div>
  <script src="js/app.js"></script>
  </body>
</html>

Answer 1 · 2018-07-30T08:27:49Z

July 30, 2018 8:27am

Hi, Raul!

I think, in this test you shouldn't edit .html file, only .js. You can select all navigation links by this:

let navigationLinks = document.querySelectorAll("nav a");

You can check this video: https://teamtreehouse.com/library/using-css-queries-to-select-page-elements

Have a nice day :)

Answer 2 · 2018-07-30T08:34:01Z

July 30, 2018 8:34am

You can't use const ulTagOne variable, for() and don't modify the html page.

Select all links in the nav element and assign them to navigationLinks.

Now you have 5 list elements, but you just need three, all links in the nav element. Select the parent (nav) and after write in the selector the child name (a). Try the querySelectorAll().

Check this link, HTML DOM querySelectorAll() Method

Welcome to the Treehouse Community

Looking to learn something new?

Raul Cisneros

Raul Cisneros

Help! Works in vscode and chrome, but I cant make it work here.

2 Answers

Anton Klyuchkovksiy

Anton Klyuchkovksiy

Raul Cisneros

Raul Cisneros

Adam Beer

Adam Beer