If element with ID has as class [duplicate]

Question

What I have now is

function setMenuCurrentTo(variable) { document.getElementById("game_" + variable).style.display = "block"; var elems = document.getElementsByClassName("current_nav"); for (var i=elems.length; i--;) { elems[i].style.display = "none"; elems[i].className = 'none'; } document.getElementById("game_" + variable).className="current_nav"; } }

So when I click a tag with a specific element(variable) it adds a content and "hides" another one. But there is a bug that when I click twice in the same button, the content dissapears and I don't have anymore content.

So I tried this code:

function setMenuCurrentTo(variable) { document.getElementById("game_" + variable).style.display = "block"; if (getElementById("game_" + variable).hasClass("current_nav")) { } else { var elems = document.getElementsByClassName("current_nav"); for (var i=elems.length; i--;) { elems[i].style.display = "none"; elems[i].className = 'none'; } document.getElementById("game_" + variable).className="current_nav"; }

The

if (getElementById("game_" + variable).hasClass("current_nav")) {} else {

Make the code don't work, the content appears but no other "hides". What is the problem in my code? Thank you, I'm very new at JavaScript, I got yesterday help for the original code. Thank you again.

EDIT:

I got the correct answer: from wroniasty

function setMenuCurrentTo(variable) { document.getElementById("game_" + variable).style.display = "block"; if (jQuery('#game_' + variable).hasClass('current_nav')) { } else { var elems = document.getElementsByClassName("current_nav"); for (var i=elems.length; i--;) { elems[i].style.display = "none"; elems[i].className = 'none'; } document.getElementById("game_" + variable).className="current_nav"; } }

@Muhammad Ramahy It's to make a content appear and other dissapear, like the type of otservlist.org/ots/1368480 Where it says description, MOTD, that type of thing. — Lohn Claidon
– Lohn Claidon, Commented May 13, 2013 at 17:46

Blender · Accepted Answer · 2013-05-13 17:26:24Z

There is no hasClass method on native DOM objects. You can either use classList:

elem.classList.add('foo') elem.classList.contains('foo')

Or split up className:

elem.className.split(/\s+/).indexOf('foo') !== -1

classList isn't supported in IE 9 and lower, but you can get a shim if you really need it. Splitting up className with a regex will work just fine without one.

Also, I would consider trying out jQuery. You could simplify your code:

function setMenuCurrentTo(name) { $('.current_nav').hide(); $('#game_' + name).show().addClass('current_nav'); }

wroniasty · Accepted Answer · 2013-05-13 17:15:34Z

6

getElementById returns a DOMNode and there is no hasClass method in DOMNode.

You may want to use a library, like jQuery:

jQuery('#game_' + variable).hasClass('current_nav')

answered May 13, 2013 at 17:15

wroniasty

8,0822 gold badges34 silver badges24 bronze badges

11 Comments

Muhammad Bekette Over a year ago

or if (getElementById("game_" + variable).className=="current_nav")

wroniasty Over a year ago

@MuhammadRamahy that'll only work if current_nav is the only class on the element

Muhammad Bekette Over a year ago

Oops I've assumed so definatly buggy

John Dvorak Over a year ago

Unless IE7 is in play (I think IE8 supports this), you can do if(... .classList.contains("current_nav"))

John Dvorak Over a year ago

jQuery is kinda overkill for checking if an element has a class. A very, very convenient overkill.

|

Community · Accepted Answer · 2017-05-23 12:02:32Z

hasClass is a jQuery function and won't work in plain Javascript. You need to match against the element's className attribute instead:

Replace that line with:

if (getElementById("game_" + variable).className.match(/\bcurrent_nav\b/)) {} else {

This will match the element even if it contains multiple class names.

See "hasClass" with javascript? for more details.

user1106925 · Accepted Answer · 2013-05-13 17:18:07Z

Use the .classList property of a DOM Element.

getElementById("game_" + variable).classList.contains("current_nav")

Patches are available for older browsers (though usually not IE6/7 if you want it on the prototype).

@LohnClaidon: Well... that doesn't make sense unless you're using an old browser.

Collectives™ on Stack Overflow

If element with ID has as class [duplicate]

4 Answers 4

Comments

11 Comments

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

11 Comments

2 Comments

2 Comments

Linked

Related