New to JS, need some wisdom to correct errors

[ahughes3]

Hello all,

I am just in the process of learning PHP & JS in order to develop CMS and Wordpress Themes. I have learned html5 and CSS3 and have a basic knowledge so far of PHP and JS, but not good enough to fix errors in other people's code.

So I'm looking for some help, advice, guidance. First things first; I'm bound to ask a stupid question, or not give you the fullest of information. Please note that it's not my intent, just my inexperience

So my first task is correcting some JS code which has been pulled together from different sources and amalgamated into one file.

There are a number of code errors which show "undefined" and "null". Now I suspect these are because either it's old coding standards or poor coding practice, but I don't know that for sure.

So I'm hoping that if I paste the code in here, someone much wiser than I and appreciative of my inexperience will be able to signpost me as to what's wrong. So here goes;

This is the error shown in Chrome console:

Code: Select all

Uncaught TypeError: Cannot read property 'click' of null
    at scripts.js?ver=4.9.6:124

and this is the file it is referring too. In particular, this line document.getElementById("defaultOpen").click(); which is line 123.

Code: Select all

// JavaScript Document

//Navigation menu
$(document).ready(function() {
		$("#navToggle a").click(function(e){
    		e.preventDefault();
     
    	$("header > nav").slideToggle();
    	$("#logo").toggleClass("menuUp menuDown");
		});
		
		$(window).resize(function() {
			if($( window ).width() >= "900") {
				$("header > nav").css("display", "block");

				if($("#logo").attr('class') == "menuDown") {
					$("#logo").toggleClass("menuUp menuDown");
				}
			}
			else {
				$("header > nav").css("display", "none");
			}
		});	
		
		$("header > nav > ul > li > a").click(function(e) {
			if($( window ).width() <= "900") { 
				if($(this).siblings().size() > 0 ) {
				e.preventDefault();
				$(this).siblings().slideToggle("fast")
				}
			}
		});	
	
//Sticky nav
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

  $('.portfolio').mouseover(function(){
      $('.portfolio-desc', this).stop().animate({
            bottom: 0
      });
   }).mouseout(function(){
        $('.portfolio-desc', this).stop().animate({
            bottom:-500
        })
   });

});

$(document).ready(function(){
 $(window).scroll(function(){
 if ($(window).scrollTop() > 100) {
  $('#scrollToTop').fadeIn();
 } else {
  $('#scrollToTop').fadeOut();
 }
 });
});

function scrolltop()
{
 $('html, body').animate({scrollTop : 0},500);
}

function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " w3-red";
}

function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
        x.previousElementSibling.className = 
        x.previousElementSibling.className.replace("w3-theme-d1", "w3-theme-d3");
    } else { 
        x.className = x.className.replace(" w3-show", "");
        x.previousElementSibling.className = 
        x.previousElementSibling.className.replace("w3-theme-d3", "w3-theme-d1");
    }
};

// Side tab section
function openTab(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

jQuery(document).ready(function ($) {
    $("#tabbed-nav").zozoTabs({
        theme: "silver",      
        animation: {
            duration: 800,
            effects: "slideH",
            minWindowWidth: 600
        }
    })
});

As I say, I'm not looking for someone to fix it for me, but more to help me understand how to go about fixing it myself.

Thanks in advance

Andy

[chdevelopment]

ahughes3,
Instead of using $("header > nav > ul > li > a"), rather give the element a unique class to reference like : $(".clickhere"), then amusing there are multiple links you should use .each to loop through all the items to add the click event.