Changing class from Javascript/JQuery

Question

I want to change a menu button in a page when it selected. No problems: I wrote (just using an example):

In CSS:

.idleColor{background:#0f0; ... }
.redColor {background:#f00;}

In HTML:

<input id='m3' type=button class=idleColor>
....
<script>  /* at page end */
  $(document).foundation();
  ....
  var activeButton = $("#m"+menuId); //assuming menuID=3
  activeButton.addClass("redColor");    
</script>

This should replace the button background color from the idle color to the active one...simple, but not working.

Two strange things: with Firebug I see that the class is added, both in 'className' and in 'classList', but the new color does not come up (and I do not thing I should reflow the button).

The other odd thing is that if I use $("#myID").classList.add("redColor") I get an error saying: myID.classList is undefined (?)

Environment:
Foundation Site 6
JQuery: jquery-2.2.4

If your code is structured like in your question, it will never work... — Ionut Necula
– Ionut Necula, Commented Mar 15, 2017 at 15:00
Actually if you see the class added is maybe a specificity issue — DaniP
– DaniP, Commented Mar 15, 2017 at 15:00

Theo Orphanos · Accepted Answer · 2017-03-15 15:03:09Z

1

Try this:

activeButton.removeClass('idleColor').addClass('redColor');

answered Mar 15, 2017 at 15:03

Theo Orphanos

1,4571 gold badge20 silver badges28 bronze badges

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

Comments

Donnie D'Amato · Accepted Answer · 2017-03-15 15:06:43Z

1

You are confusing native JavaScript methods with jQuery ones.

The following problem...

$("#myID").classList.add("redColor") I get an error saying: myID.classList is undefined (?)

..occurs because classList is not a property of jQuery, it's a property of HTML Element Objects found in native JavaScript. This can be resolved in one of the following ways.

jQuery only

$("#myID").addClass("redColor");

JavaScript / jQuery hybrid

$("#myID")[0].classList.add("redColor");

JavaScript only

document.getElementById('myId').classList.add("redColor");

answered Mar 15, 2017 at 15:06

Donnie D'Amato

3,9701 gold badge20 silver badges42 bronze badges

Comments

marc_s · Accepted Answer · 2017-03-22 09:53:38Z

0

I want to sink into shame :-(

The main problem (class not changing) was due to a stupid, stupid, stupid error.

In my page I have two set of menus, for small or medium-up screens.

I copied the relevant parts of buttons in each section...with the same IDs !

The jQuery function did its job, selecting the correct button in the 'small' section (the first occurence it found), actually hidden.

Since I was testing with a large screen I did not see any change.

As far as the 'classList' problem, I forgot that it is an array, so it needs an index. Setting $("#myID")[0] fixed it.

Thanks to fauxserious to have clarified this. Now it works in both ways, javascript and jQuery.

This time I learned something too: when you are sure that the code is correct, look for the problem elsewhere.

edited Mar 22, 2017 at 9:53

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Mar 15, 2017 at 16:11

Orionis

1,0311 gold badge8 silver badges14 bronze badges

Collectives™ on Stack Overflow

Changing class from Javascript/JQuery

3 Answers 3

Comments

jQuery only

JavaScript / jQuery hybrid

JavaScript only

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

jQuery only

JavaScript / jQuery hybrid

JavaScript only

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related