JavaScript - Toggle css style on keyDown

Question

Need some help figuring out what's wrong with my second function. JSfiddle here: JSfiddle

//add an outline on click
function addOutline(){
    box1.classList.toggle('selected');
}
box1.addEventListener('click', addOutline, false);


//change shape on element with class "selected" when "e" is pressed
function changeShape (event) {
    var arr = document.getElementsByClassName("selected");
    var key = event.keyCode;
        for(var i = 0; i < arr.length; i++) {
            if(key === 69 && arr[i].className === "selected") {
                box1.classList.toggle('circle');
            }   
        }
}
document.addEventListener("keydown", changeShape, false);

Basically what i'm trying to do is, when the key "e" is pressed AND if the elements className is equal to "selected" then the div "box" should toggle the circle class (from the css).

I got it to work with only the keyDown, but when trying to add the className statement to the function, it wont work. Check the jsfiddle at the top to make more sense of this. Any ideas?

Why do you need to test the class in the if statement? arr can only contain elements with that class, since that's how you selected them. — Barmar
– Barmar, Commented Mar 30, 2015 at 18:50

Rick Hitchcock · Accepted Answer · 2015-03-30 19:02:22Z

1

Because className contains multiple classes, this does not work:

arr[i].className === "selected"

Since arr at that point contains only elements that include the "selected" class, you don't need that check.

However, if you need it for a different reason, you can use classList.contains instead:

arr[i].classList.contains("selected")

Fiddle

edited Mar 30, 2015 at 19:02

answered Mar 30, 2015 at 18:53

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

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

1 Comment

blex Over a year ago

Nice catch! I didn't realize the check was useless.

taxicala · Accepted Answer · 2015-03-30 18:47:04Z

0

Does your elements have more than one class? If yes, maybe this helps:

if(key === 69 && arr[i].className.indexOf("selected") > -1) {

answered Mar 30, 2015 at 18:47

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Comments

blex · Accepted Answer · 2015-03-30 18:47:15Z

0

Changing this line with indexOf() works:

if(key === 69 && arr[i].className.indexOf("selected")>-1)

Updated JS Fiddle

That's because the className is not equal to selected, but to selected box center green size200.

answered Mar 30, 2015 at 18:47

blex

25.7k6 gold badges48 silver badges78 bronze badges

Comments

Avitus · Accepted Answer · 2015-03-30 19:01:33Z

0

I would add the function for has class that way you don't have to worry about if you have a class that contains selected and then just add the combination of the key code and hasclass().

Here's the function for hasClass and how you can modify your code:

function hasClass(el, cls) {
  return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
}

Then just change your code to be:

if(key === 69 && hasClass(arr[i],"selected")) {
                box1.classList.toggle('circle');
            }

Here is the updated fiddle JSFiddle

answered Mar 30, 2015 at 19:01

Avitus

16k6 gold badges47 silver badges54 bronze badges

1 Comment

Rick Hitchcock Over a year ago

Good point about the possibility of a "...selected..." class. However, since OP is already using classList, the classList.contains method should do the work of hasClass.

Collectives™ on Stack Overflow

JavaScript - Toggle css style on keyDown

4 Answers 4

1 Comment

Comments

Updated JS Fiddle

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related