How to dynamically add SLDS class to VF page div tag

Question

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.

Answer 1

My guess is that you are not passing the class name attribute as a string,

the documentation for getElementById specifies this:

elementID String Required. The ID attribute's value of the element you want to get

if you check your console, i'm pretty sure you will see something wihtin the lines of:

Uncaught TypeError: Cannot read property 'className' of null