Navlink error reported, however it works fine when I test it?

Issue Description

Running Tests for "Build a Product Landing Page". Results achieved 15/16 tests were successful. The test that failed stated:

When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.' The .nav-link with href="#pricing" is not linked to a corresponding element on the page : expected null to not equal null AssertionError: The .nav-link with href="#pricing" is not linked to a corresponding element on the page : expected null to not equal null at Proxy.c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:1889) at Proxy.l (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:431:130) at Function.n.isNotNull (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:1549) at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:138047 at NodeList.forEach () at a. (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:137853) at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38668 at i.g.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38963) at N.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45686) at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:46651

There are 3 Nav links and they all work fine when I test them. Your testing only highlights the 3rd link as failing. All 3 links use the same HTML coding solution.

Browser Information

Browser Name, Version: Google Chrome is up to date Version 83.0.4103.97 (Official Build) (64-bit)
Operating System: Windows 10 Home Version: 1909; OS Build: 18363.900
Mobile, Desktop, or Tablet: HP Laptop: Processor: Intel CORE i7-1065G7 CPU @ 1.30GHz 1.50 GHz; Installed Ram 16.0GB; System Type: 64Bit operating system, x64-based processor

Your Code / Link to Your Pen


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Build a Product Landing Page</title>
    <link rel="stylesheet" href="C:\Users\Mike\source\repos\Training\Responsive Web Design Projects\Build a Product Landing Page\Build a Product Landing Page.css">
</head>
<body>
    <main id="main">
        <header id="header" class="header">
            <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="" style="width:280px;height:32px; float:left;">
            <nav id=nav-bar>
                <a class="nav-link" style="text-decoration:none" href="#pricing">Pricing</a>
                <a class="nav-link" style="text-decoration:none" href="#howitworks">How it Works</a>
                <a class="nav-link" style="text-decoration:none" href="#features">Features</a>
            </nav>
        </header>
        <div class="page__content-container" id="img-div">

            <h1 id="title">Handcrafted, home-made masterpieces</h1>

            <br>
            <form id=form action="https://www.freecodecamp.com/email-submit">
                <input type="email" placeholder="Enter your Email address" id="email" name="email" required />
                <br><br>
                <input type="submit" class="search" id="submit" value="Get Started">
            </form>
            <br><br>
            <img id="flame-img" src="C:\Users\Mike\source\repos\Training\Responsive Web Design Projects\Build a Product Landing Page\Flame Image.png" alt="" style="width:70px;height:100px; padding-left: 2em; float:left;">
            <h2 id=features>Premium Materials</h2>
            <a name="features"></a>
                <p1>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p1>
                <br><br>
                <img id="lorry-img" src="C:\Users\Mike\source\repos\Training\Responsive Web Design Projects\Build a Product Landing Page\Lorry Image.png" alt="" style="width:120px;height:100px; padding-left: 2em; float:left;">
                <h2>Fast Shipping</h2>

                <p1>We make sure you receive your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p1>
                <br><br>
                <img id="battery-img" src="C:\Users\Mike\source\repos\Training\Responsive Web Design Projects\Build a Product Landing Page\Battery Image.png" alt="" style="width:100px;height:70px; padding-left: 2em; float:left;">
                <h2>Quality Assurance</h2>
                <p1>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p1>

            <br><br><br>
            <a name="howitworks"></a>
                <iframe id="video" width="600" height="350" src="https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="padding-left: 13em; float:left;"></iframe>
                <br><br><br>
                <br><br><br>

            <a name="pricing"></a>
                <div id="box-container">
                    <div id="box-1">
                        <h4>TENOR TROMBONE</h4>
                        <p>$600</p>
                        <p1>Unlike many other wind instruments, it will have the same notes and note names as a piano.</p1>
                        <br><br><br>
                        <input type="text" id="select" value="SELECT" class="select" />
                    </div>

                    <div id="box-2">
                        <h4>BASS TROMBONE</h4>
                        <p>$900</p>
                        <p1>A single rotary bass trombone is typically pitched in Bb/F, just like a conventional tenor trombone.</p1>
                        <br><br><br>
                        <input type="text" id="select" value="SELECT" class="select" />
                    </div>

                    <div id="box-3">
                        <h4>VALVE TROMBONE</h4>
                        <p>$1200</p>
                        <p1>It plays just like a trumpet, however it is an octave lower. </p1>
                        <br><br><br><br>
                        <input type="text" id="select" value="SELECT" class="select" />
                    </div>

        </div>
    </main>
</body>
<footer class="footer">
    <a class="nav-link" style="text-decoration:none" href="#privacy">Privacy</a>
    <a class="nav-link" style="text-decoration:none" href="#terms">Terms</a>
    <a class="nav-link" style="text-decoration:none" href="#contact">Contact</a>
    <br><br>
    <pf>Copyright 2016, Original Trombones</pf>
</footer>
</html>

Screenshot

Hello there,

In general, I suggest you open an issue like this on the forum. It would help, if you linked to your project, wherever it is hosted.

From what I assume, the tests would fail, because you are telling them to look for an element with an id="pricing", yet none exists. I cannot speak for why only that element brings up the error. Likely, you are experiencing buggy behaviour, because, from what I know, the a tag does not support the name attribute. The only resource I found with this system of linking is here, and it does not appear to be a reliable resource.

Essentially, I am going to close this issue, as the code does not contain best-practices, nor normal-practices. I welcome you to re-open this, with evidence the tests should be altered.

Thank you.

Hello Shaun,

As per my issue, the element does exist and I have no problem linking to it when I test, so not sure why you / the code you're executing can't find it? How are you parsing the code. I have written plenty of parsers in my time and am sure it would be easy enough to find. Please see extract below:

Nav Bar
Pricing How it Works Features
References Premium Materials

As stated in my issue when I click on the link it takes me to the place on the web page where the reference is regardless of which link I click. My issue is why can't your parser see it. The link is there so there is either something wrong with the way I've coded it or there is something wrong with your parser that it is unable to identify it.

I would appreciate you looking into it, as it looks to me as though it does exist and I'm unsure why you couldn't find it if you cast your eye over the code?

many thanks, Mike

On Sat, 13 Jun 2020 at 13:15, Shaun Hamilton notifications@github.com wrote:

Hello there,

In general, I suggest you open an issue like this on the forum https://www.freecodecamp.org/forum. It would help, if you linked to your project, wherever it is hosted.

From what I assume, the tests would fail, because you are telling them to look for an element with an id="pricing", yet none exists. I cannot speak for why only that element brings up the error. Likely, you are experiencing buggy behaviour, because, from what I know, the a tag does not support the name attribute. The only resource I found with this system of linking is here http://www.tagindex.net/html/link/a_name.html, and it does not appear to be a reliable resource.

Essentially, I am going to close this issue, as the code does not contain best-practices, nor normal-practices. I welcome you to re-open this, with evidence the tests should be altered.

Thank you.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/freeCodeCamp/testable-projects-fcc/issues/1166#issuecomment-643615392, or unsubscribe https://github.com/notifications/unsubscribe-auth/AO75BYIYNY6SAHC52I4HAHTRWNUWHANCNFSM4N44YPQQ .

The link is there so there is either something wrong with the way I've coded it or there is something wrong with your parser that it is unable to identify it.

You are absolutely correct. I did not deny the functionality. What I said is that linking an anchor to another anchor via a name attribute is not best-practice or even good-practice. Therefore, I do not believe the tests should consider this.

The tests expect the anchor link to take the page to an element with a corresponding id. Best-practice is:

<ul>
  <li><a href="#contacts">Click to go to Contacts</a></li>
</ul>
...
<section id="contacts">...</section>

Hi Shaun,

Thanks for your feedback. I appreciate that you have taken the time and trouble to respond.

Although I'm an experienced coder in other languages, I'm learning HTML / CSS / Javascript and am eager to adopt best practice. Is there a guide I could read that would point me in the right direction, or act as a point of reference, as I followed the advice I found through Google, which you state is not good practice?

Many thanks, Mike

On Sat, 13 Jun 2020 at 20:09, Shaun Hamilton notifications@github.com wrote:

The link is there so there is either something wrong with the way I've coded it or there is something wrong with your parser that it is unable to identify it.

You are absolutely correct. I did not deny the functionality. What I said is that linking an anchor to another anchor via a name attribute is not best-practice or even good-practice. Therefore, I do not believe the tests should consider this.

The tests expect the anchor link to take the page to an element with a corresponding id. Best-practice is:

Click to go to Contacts

...

...

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/freeCodeCamp/testable-projects-fcc/issues/1166#issuecomment-643665136, or unsubscribe https://github.com/notifications/unsubscribe-auth/AO75BYNT4OUXNZIFSZFIDC3RWPFFBANCNFSM4N44YPQQ .

We are happy for campers to ask questions.

For HTML, CSS, and JavaScript, your first point of call will likely be: Mozilla Docs, or W3SCHOOLS. They are considered the official docs.

Other than that, freeCodeCamp does teach some of the best-practices. The only issue is that the lessons were purposely made very short, thus do not go over everything. This is why fCC's mantra is Read-Search-Ask.

Do not forget about the freeCodeCamp forum. It is full of experienced web devs.

Hope this helps

freeCodeCamp / testable-projects-fcc