CODEWITHSUNDEEP
javascripthtmlcss
Lansana Camara
Lansana Camara

Reputation: 9873

My navigation bar wont become fixed - JS code won't work

This is the error:

Uncaught TypeError: Cannot set property 'innerHTML' of null

Yes, I know that this question has been asked before.

I have read through all of the similar questions in attempt to find a solution for myself, but nothing has helped.

Solutions from previous questions:

  1. You have an element has that ID - check
  2. The element IS on the page before that Javascript is run - check
  3. You bind the execution of your JS to an event (follow-up from previous) that happens after the element is on the page - check (this means that the JS occurs after the user has done something, correct?)
  4. I tried adding the .JS files inside of the body tags (at the end), and outside of the body tags, but neither had an effect.

Those are all of the solutions I have seen with my question (that I understand with my current knowledge) and am able to apply to my code. I may have overlooked a solution (but only because I didn't understand it) because of my lack of knowledge.

I cant seem to find a solution. When I add the fixed-header to the #main-navigation manually, it works fine, but the JS error is preventing it from working through the JS code.

If it helps, the website is http://desimara.com

Here is my script.js file:

var $window = $(window);
var $nav = $('#main-navigation');
$window.scroll(function(){
    if ($window.scrollTop() >= 119) {
      $nav.addClass('fixed-header');
    }
    else {
      $nav.removeClass('fixed-header');
    }
});

var quotes = [
  "This guy knows what hes doing, huge vouch for him since he created a kickass site for me.<br><br><br><br>- Tappo Masa ([email protected])",
  "Huge vouch for this guy! Created a very nice looking website for me! This is a great service, especially because it is free. Highly recommend using this guy for small websites to be created. Thanks once again!<br><br>- Andrew Kilian ([email protected])"
];

var counter = 0;
$pID = "quoteText";

setInterval(function () {
if (counter < quotes.length) {
    document.getElementById($pID).innerHTML = quotes[counter];
    counter++;
  }
  else {
    counter = 0;
  }
}, 4000);

Here is the HTML with the #main-navigation:

<nav id="main-nagivation">
        <ul>
          <a href="portfolio.php" id="portfolio" class="navigation"><li>Portfolio</li></a>
          <a href="about.php" class="navigation"><li>About</li></a>
          <a href="free.php" class="navigation"><li>Free Stuff</li></a>
          <a href="donate.php" class="navigation"><li>Donate</li></a>
        </ul>
      </nav>

Here is the HTML with the including of the JS files:

</body>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow30.js"></script>
<noscript>Not seeing a <a href="http://www.scrolltotop.com/">Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>
    <script src="http://code.jquery.com/jquery.js"></script>
</html>

Upvotes: 0

Views: 46

Answers (1)

Levsero
Levsero

Reputation: 641

You have a typo on your id in the HTML file. "main-nagivation".

(sorry don't have enough points to comment:( )

Upvotes: 1

Related Questions