How to use HTMLElement.classList(.toggle)?

I have made a webpage (woohoo) to test a few CSS3 transition (woohoo again) things. The transitions work just fine (last woohoo). However the new HTMLElement.classList does something weird to another element.

The webpage: http://hotblocks.nl/tests/css/transitions.html

What it does: Toggle the class b on the body element.

how it does that: unbelievably simple: document.body.classList.toggle('b');

and it works! But! 开发者_开发知识库The body's first child somehow is changed. The class of that first child was slow before toggling and then got changed to object (by the toggle???).

Why does it do that? Am I not using the toggle function correctly? Does the toggle function work different than I'm expecting? Have not reaklly read the docs/specs, but it (.classList) is made to be simple, right?

The problem is not in the toggle function, but in the script tag at the end of the page which initializes event handlers for the button tags.

The script adds an event handler to all button tags in the document, so that a click on a button sets the class of the first div in the button's parent element to object plus the class name of the button.

You probably only intended to add this event handler to the back and forth buttons, but it's added to the bgcolor button too, causing it to change the class name of your slow div when the button is clicked.