I am a beginner in JavaScript (and Programming too). I was playing with JavaScript Objects and got stuck soon. I have a nice navigation bar (class = "favnav") and I want its buttons to change their background property when mouseover event occurs, plus, want to show some darkness around the element (that's ) if it's href attribute has the same value as window.location. To solve this, I tried to design a constructor (may be a bad idea) which has properties : name, class, target and id. I assigned a handler to window.onload and all the stuffs has been done inside this function. First, the browser console gave me an error saying "Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode" . I fixed that by adding the literal "use strict" at the top of my handler function. Now I got the following error:"Uncaught SyntaxError: Unexpected token ,". Now I have no Idea what it is and how to solve it. The whole script looks like:
window.onload = function(){
"use strict";
function MenuItem(name, class, target, id)
{
this.object = document.getElementsByClassName(class).item(id);
this.name = name;
this.class = class;
this.target = target;
this.id = id;
this.is = false;
}
MenuItem.prototype.spec = function(){
if(window.location == this.object.getAttribute("href"))
{
this.object.style.backgroundColor = "rgb(0,156,128)";
this.is = true;
}
}
MenuItem.prototype.action = function()
{
if(!this.is)
{
this.object.onmouseover = function(obj){
obj.style.backgroundColor = "grey";
}
this.object.onmouseout = function(obj){
obj.style.backgroundColor = "transparent";
}
}
}
var Home = new MenuItem("Home", "favnav", "link to a page in my site", 0);
var Posts = new MenuItem("Posts", "favnav", "link to a page in my site", 1);
var Managers = new MenuItem("Managers", "favnav", "link to a page in my site", 2);
var Routines = new MenuItem("Routines", "favnav", "link to a page in my site",3);
var About = new MenuItem("About", "favnav", "link to a page in my site", 4)
var Careers = new MenuItem("Authors", "favnav", "link to a page in my site", 5);
var elems = document.getElementsByClassName("favnav");
for(var i = 0; i < elems.length; ++i)
{
elems.item(i).spec();
elems.item(i).action();
}
}
The code above may have more errors. Please help me find and fix them.