-1

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.

1
  • This question is similar to: why is class a reserved word in JavaScript?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. Commented Feb 8 at 9:01

1 Answer 1

1

Firefox says: SyntaxError: class is a reserved identifier

Try renaming the parameter to clazz.

Sign up to request clarification or add additional context in comments.

2 Comments

okay...let me try it. Please let me know if you see any other kind of error in the code. Thanks :)
That Worked, and I fixed a few more bugs (like obj.style... should be obj.target.style... ). Thanks :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.