New to JS, need some wisdom to correct errors

Javascript coding ..

Moderators: egami, macek, gesf

Post Reply
ahughes3
New php-forum User
New php-forum User
Posts: 1
Joined: Tue Jun 12, 2018 2:38 am

Tue Jun 12, 2018 4:56 am

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 :D

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

Post Reply