[SalesForce] How to dynamically add SLDS class to VF page div tag

On click of a button, I want to dynamically add 'slds-has-error' class to a div around an element.

My markup is as:

<apex:form id="theForm">

            <!-- divContainer -->
            <div id="divContainer" class="slds"> 
                <div class="slds-m-around--medium">
                    <div class="slds-form-element__group">
                        <!-- Document Type -->
                        <div class="slds-grid slds-m-bottom--large">                                                          
                            <div id="errorDivPicklist" class="slds-form-element slds-size--1-of-2 slds-p-right--x-small">
                                <span class="slds-required" title="required">*</span><label class="slds-form-element__label" for="ddlDocumentType">{!$Label.DOCUMENT_TYPE_LBL}</label>
                                <div class="slds-form-element__control">
                                    <div class="slds-select_container">
                                        <apex:selectList id="ddlDocumentType" styleClass="slds-select" value="{!documentType}" size="1" required="true">
                                            <apex:SelectOption itemValue="" itemLabel="{!$Label.Select}"/>
                                            <apex:SelectOptions value="{!documentTypes}"/>
                                        </apex:selectList>
                                    </div>
                                </div>
                                <div class="slds-form-element__help slds-hide" id="error-message-picklist-id">This field is required</div>
                            </div>
                            <div class="slds-form-element slds-size--1-of-2 slds-p-left--x-small">
                                <span class="slds-required" title="required">*</span><label class="slds-form-element__label" for="txtFileName">{!$Label.FILE_NAME_LBL}</label>
                                <div class="slds-form-element__control">
                                    <apex:inputText styleClass="slds-input" id="txtFileName" value="{!fileName}" onchange="onFileNameChange(this);" required="true"/> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
             </div>
</apex:form>

On click of a button JS function is called:

function validateRequiredFields(){
        var documentType='{!documentType}';

        alert('Inside validateRequiredFields: ');

        if(documentType === '' || documentType === null || documentType === undefined){
            alert('Inside value empty: ');
            document.getElementById(errorDivPicklist).className += ' slds-has-error';
            document.getElementById(error-message-picklist-id).className -= ' slds-hide';            
        }
        else{
            alert('Inside filled');
            document.getElementById(errorDivPicklist).className -= ' slds-has-error';
            document.getElementById(error-message-picklist-id).className += ' slds-hide';
        }
    }

Appropriate alerts are triggered when apex:selectList is empty. But the class is not applied to that element. What can be reason for this? When manually applied through code, the style is applied and red border is shown.