Proofreading Javascript and Javascript in general

Question

I coded out a book tutorial in JS this morning. I am usually pretty good at following directions and debugging (finding small but paralyzing) errors in my code, in several other languages (Python, Java, and C++).

In the case of JavaScript though, I seem to have much more trouble. I could not make my code do what the book said it would (create drop downs).

I went over the code carefully, found a couple of typical errors that I might make, and still could not make it run. So, I used developer tools to find a working version of the code and compared it with mine using a split screen. I could not see the difference anywhere. (It does not help my concentration that, being an older programmer-in-training, I immediately start thinking "I am too old/stupid/etc to do this.")

I know I can submit the working version but before I do I would really, really, really like to know what I am missing here that makes the version I found work and mine not.

Also, since I seem to have more trouble debugging my JS projects, I am wondering why this is part of the reason why some folks seem to hate JS so passionately.

Thanks. My version first, then the working version...

window.onload = init;
var activeMenu = null;
var clipHgt = 0;
var timeID;

function init() {
var menus = new Array();
var allElems = document.getElementsByTagName("*");

for (var i = 0; i < allElems.length; i++) {
if (allElems[i].className == "menu") menus.push(allElems[i]);
}

for (var i = 0; i < menus.length; i++) {
   menus[i].onclick = changeMenu;
   menus[i].onmouseover = moveMenu;
}

document.getElementById("logo").onclick = closeOldMenu;
document.getElementById("linkList").onclick = closeOldMenu;
document.getElementById("main").onclick = closeOldMenu;
}


function moveMenu() {

if (activeMenu){

   closeOldMenu();


   menuID = this.id + "List";
   activeMenu = document.getElementbyId(menuID);
   activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
   activeMenu.style.display = "block";
   timeID = setInterval("rollDown()", );


}

}

function changeMenu() {

closeOldMenu();

menuID = this.id + "List";
activeMenu = document.getElementbyId(menuID);
activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
activeMenu.style.display = "block";
timeID = setInterval("rollDown()", 1);

}

function closeOldMenu() {
if (activeMenu) {
   clearInterval(timeID);
   activeMenu.style.display = "none";
   activeMenu = null;
}

}


function rollDown() {
   clipHgt = clipHgt + 10;
   if (clipHgt < 400) {
      activeMenu.style.clip = "rect(0px, 150px," + clipHgt + "px, 0px)";
   } else {
      clearInterval(timeID);
      clipHgt = 0;
   } 
}


```Javascript


window.onload = init;


var activeMenu = null;
var clipHgt = 0;
var timeID;

function init() {
   var menus = new Array();
   var allElems = document.getElementsByTagName("*");

   for (var i = 0; i < allElems.length; i++) {
      if (allElems[i].className == "menu") menus.push(allElems[i]);
   }

   for (var i = 0; i < menus.length; i++) {
      menus[i].onclick = changeMenu;
      menus[i].onmouseover = moveMenu;
   }

   document.getElementById("logo").onclick = closeOldMenu;
   document.getElementById("linkList").onclick = closeOldMenu;
   document.getElementById("main").onclick = closeOldMenu;

}

function moveMenu() {
   // this function moves the pull-down menu from one title to another

   if (activeMenu) {
      closeOldMenu();

      menuID = this.id + "List";
      activeMenu = document.getElementById(menuID);
      activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
      activeMenu.style.display = "block";  
      timeID = setInterval("rollDown()", 50);
   }

}


function changeMenu() {
   // this function changes the pull-down menu displayed in the document

   closeOldMenu();

   menuID = this.id + "List";
   activeMenu = document.getElementById(menuID);
   activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
   activeMenu.style.display = "block";
   timeID = setInterval("rollDown()", 1);

}


function closeOldMenu() {
   if (activeMenu) {
      clearInterval(timeID);
      activeMenu.style.display = "none";
      activeMenu = null;
   }
}


function rollDown() {
   clipHgt = clipHgt + 10;
   if (clipHgt < 400) {
      activeMenu.style.clip = "rect(0px, 150px," + clipHgt + "px, 0px)";
   } else {
      clearInterval(timeID);
      clipHgt = 0;
   } 
}

Answer 1 · 2017-04-05T17:38:32Z

April 5, 2017 5:38pm

I see a couple of typos.

About line 48, you wrote "getElementbyId" (lower case "b") instead of "getElementById" (capital "B"). The same thing occurs again at about line 62 (in changeMenu).

Also, a few lines down from that first typo you have a call to setInterval where you placed a comma after the first argument but did not supply a second argument.

I can't imagine this would be a "reason why some folks seem to hate JS so passionately", since most languages are case-sensitive. But I'm curious about that comment — where did you hear/see it?

Answer 2 · 2017-04-05T17:42:55Z

April 5, 2017 5:42pm

Thank you. I think I have trouble remembering to check the spelling, capitalization of the DOM related commands.

It seems that 1-2 times a week I run across some statement in places like QUORA and StackOverflow "Isn't JS horrible?"

I will post if I see one in the next couple of weeks.

Thanks again.

Nancy Melucci

Answer 3 · 2017-04-05T18:12:26Z

April 5, 2017 6:12pm

Yes I found it. I did get some help from this...

http://esprima.org/

they have an online general syntax checker, and since I tend to write my JS in Sublime, I can use the extra help.

thanks again!

Welcome to the Treehouse Community

Looking to learn something new?

Nancy Melucci

Nancy Melucci

Proofreading Javascript and Javascript in general

3 Answers

Steven Parker

Steven Parker

I see a couple of typos.

Nancy Melucci

Nancy Melucci

Steven Parker

Steven Parker

Nancy Melucci

Nancy Melucci