If element with ID has as class

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 http://otservlist.org/ots/1368480 Where it says description, MOTD, that type of thing. — Lohn Claidon, May 13 '13 at 17:46

Blender · Answer 1 · 2013-05-13T17:26:24.177

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');
}

score 6 · Accepted Answer · answered May 13 '13 at 17:15

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 '13 at 17:15

wroniasty

7,884
2
32
24

or `if (getElementById("game_" + variable).className=="current_nav")` – Muhammad Bekette May 13 '13 at 17:17
1

@MuhammadRamahy that'll only work if `current_nav` is the only class on the element – wroniasty May 13 '13 at 17:18
Oops I've assumed so definatly buggy – Muhammad Bekette May 13 '13 at 17:20
Unless IE7 is in play (I think IE8 supports this), you can do `if(... .classList.contains("current_nav"))` – John Dvorak May 13 '13 at 17:20
@JanDvorak: MDN says only IE 10 and above. – Blender May 13 '13 at 17:21
2

jQuery is kinda overkill for checking if an element has a class. A very, very convenient overkill. – John Dvorak May 13 '13 at 17:21
@Blender ouch. What about regexes? `if(... .className.matches(/(^| )current_nav( |$))/))`... yeah, jQuery makes sense here. – John Dvorak May 13 '13 at 17:23
@JanDvorak: I was thinking more like `.className.split(/\s+/).indexOf('foo')`, but jQuery's always nice – Blender May 13 '13 at 17:23
of course it's trivial to roll your own `hasClass` function, but not only jQuery, but most js client-side libs have one. – wroniasty May 13 '13 at 17:24
@Blender yep. jQuery _is_ nice. But it's nice to not get lost without it, too :-) – John Dvorak May 13 '13 at 17:24
Correct answer is this one! Thank you a lot! – Lohn Claidon May 13 '13 at 17:38

score 2 · Answer 3 · edited May 23 '17 at 12:02

2

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.

edited May 23 '17 at 12:02

Community

1
1

answered May 13 '13 at 17:16

nullability

10,545
3
45
63

`\bfoo\b` matches `foo-bar` – Blender May 13 '13 at 17:27
This one didn't work for me :S – Lohn Claidon May 13 '13 at 17:39

score 1 · Answer 4 · answered May 13 '13 at 17:18

1

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).

answered May 13 '13 at 17:18

Didn't work for me :S But thank you :D – Lohn Claidon May 13 '13 at 17:42
@LohnClaidon: Well... that doesn't make sense unless you're using an old browser. – May 13 '13 at 18:10

If element with ID has as class

4 Answers4