Javascript InvalidCharacterError al modificar un nombre css con un espacio

Estoy modificando algunos botones que se generan dinámicamente a través de JavaScript. No tengo control sobre la statement estática de los nombres de las classs y es por eso que escribí una function para hacerlo en la carga de la página. Entiendo por qué está sucediendo (no me gusta el espacio en el 'button zocial'), solo necesito una solución y definitivamente no estoy tan dotado con JavaScript. Aquí está el error si inspecciona el button de la página: Unncaught InvalidCharacterError: no se pudo ejecutar 'add' en 'DOMTokenList': el token proporcionado ('zocial facebook') contiene caracteres de espacio HTML, que no son válidos en tokens. Aquí está mi código de JavaScript:

var buttonz = document.getElementsByName('provider'); for (var i = 0, length = buttonz.length; i < length; i++) { if (buttonz[i].value == 'Facebook') { buttonz[i].classList.remove('btn-default'); buttonz[i].classList.add('zocial button'); } 

Si quieres verlo en vivo aquí, ve: http://jsbin.com/nifuxoyo/1/watch

Bueno, los nombres de class no pueden contener espacios, porque el espacio separa múltiples nombres de class entre sí. Por ejemplo, si su HTML contiene

 class="zocial button" 

significa que este elemento tiene dos classs, "zocial" y "button".

Si desea agregar ambas classs, debe pasar cada una como argumento al método:

 buttonz[i].classList.add('zocial', 'button'); 

Se puede encontrar más información en la documentation de MDN .