Cannot set property 'class' of undefined

Question

I'm certain I'm doing something stupid, or missing something silly but I get the follow 2 error messages, from client side onClick of a button:

Cannot set property 'class' of undefined

Cannot set property 'scrollTop' of null

All I'm trying to do is style an inputTextArea, and then scroll to the top of a scrollable content div that I have.

    document.getElementById(x$("#{id:obj1Error}").Attributes["class"] = "has-error");
    var myDiv = document.getElementById(x$("#{id:contentWhiteBackground}"));
    myDiv.scrollTop = 0;

Any pointers appreciated. Cheers

UPDATE:

Client code on button:

// Make sure user has entered content into the first objective at minimum
var objcolparent = document.getElementById("ObjColOuter").children[0];
var objValue = objcolparent.getElementsByTagName("TEXTAREA")[0].value;

if(objValue ==""){
var o = {};
o.title = "Validation Failed";
o.body = "You must enter at least one objective before submitting";
o.alertIcon = "fa-thumbs-down fa-lg";
o.alertType = "danger";

var myDiv = document.getElementById("#{id:contentWhiteBackground}");
//document.getElementById("#{id:obj1Error}").className = "has-error";
myDiv.scrollTop = 0;
bootAlert.show('alertServer',JSON.stringify(o));
return false;
}

if(confirm("Are you sure you want to submit your objectives?")){
return true;
}else{
return false;
}

Code on xpage, which contains the obj1Error div:

<xp:repeat id="repeat1" rows="100"
                            value="#{viewScope.fields}" var="fieldName">

                            <xp:text escape="true"
                                id="computedField4" styleClass="h5">


                                <xp:this.value><![CDATA[#{javascript:"Objective "+@RightBack(fieldName, 16)}]]></xp:this.value>
                            </xp:text>
                            <br />
                            <xp:div id="obj1Error">

                                <xp:text escape="true"
                                    id="computedField1" styleClass="h6">



                                    <xp:this.value><![CDATA[#{javascript:"Details"}]]></xp:this.value>
                                </xp:text>
                                <xp:inputTextarea
                                    id="inputTextarea1" style="height:100px;resize:none;"
                                    showReadonlyAsDisabled="true">
                                    <xp:this.value><![CDATA[#{document1[fieldName]}]]></xp:this.value>
                                    <xp:this.disabled><![CDATA[#{javascript:try{

var strStatus:string = document1.getItemValueString("status"); 
var booDisabled:boolean = true;

if(strStatus == "New" || strStatus == "Draft" || strStatus == "Returned") {
booDisabled = false;
}

return booDisabled;

}catch(e){
writeToLog("Error - ccObjectives disable objective details: " + e);
}}]]></xp:this.disabled>

                                </xp:inputTextarea>
                            </xp:div>
                            <br />
                        </xp:repeat>

Answer 1

You just need to write

var myDiv = document.getElementById("#{id:contentWhiteBackground}");

to get the DOM element.

To set an element's class(es) you have to write:

document.getElementById("#{id:obj1Error}").className = "has-error";