Toggle between adding/removing class name from an element in javascript

Question

I am working on Toggle between adding and removing class name from an element in Javascript.

Below is the code for that:

const yaxis = xyaxis.querySelector('.y-axis');   

yaxis.classList.toggle('y-axis-scroll-bar', .35 <= yaxis.firstElementChild.offsetHeight / window.innerHeight);

Problem Statement:

In the above code yaxis.classList.toggle('y-axis-scroll-bar') seems to add y-axis-scroll-bar on toggle.

I am wondering what this part .35 <= yaxis.firstElementChild.offsetHeight / window.innerHeight of the code is doing above.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

When in doubt, check the docs. The second argument to classList.toggle instructs the intepreter whether to add the class specified in the first argument, or whether to remove it:

toggle( String [, force] )
When only one argument is present: Toggle the class value; i.e., if the class exists then remove it and return false, if not, then add it and return true.

When a second argument is present: If the second argument evaluates to true, add the specified class value, and if it evaluates to false, remove it.

So, in your code, when

.35 <= yaxis.firstElementChild.offsetHeight / window.innerHeight

evaluates to true, the class y-axis-scroll-bar gets added to the element, if the class doesn't exist on it already - otherwise, if it evaluates to false, the class is removed if it exists.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 17, 2018 at 23:48

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

3 Comments

john Over a year ago

Thanks for letting me know. It definitely make sense. I have accepted your answer as well. I am wondering what this line .35 <= yaxis.firstElementChild.offsetHeight / window.innerHeight means here ?

john Over a year ago

I was having flickering issue on zoom-in/zoom-out or sometimes in the normal mode as well. It was very hard to reproduce so that's why I am not using fiddle in the question. On removing the above line from my code I was able to solve the flickr issue in the chrome.

john Over a year ago

Not sure how removing this line solved from flcikering issue in the chrome .35 <= yaxis.firstElementChild.offsetHeight / window.innerHeight

Collectives™ on Stack Overflow

Toggle between adding/removing class name from an element in javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related