Using CSS Classes in JavaScript

When you are writing Javascript in Alchemer and need to interact with the DOM, the most straightforward option is often to use the IDs of the specific elements that you are interacting with. 

For example, here is the HTML for an individual textbox question in a survey:

<div id="sgE-2081629-1-3-box" class="sg-question sg-type-textbox first">
        <input type="hidden" id="sgE-2081629-1-3-meta" name="sgE-2081629-1-3-meta" value="hidden=false&amp;required=false">
        <input type="hidden" id="sgE-2081629-1-3-time" name="sgE-2081629-1-3-time" value="">
            <div class="sg-question-title">
                <label for="sgE-2081629-1-3-element">
                <span class="sg-question-number">2.</span> Most important philosopher</label>
                </div>
            <div class="sg-question-options">   
        <div class="sg-control-text sg-control-text">

            <input type="text" id="sgE-2081629-1-3-element" name="sgE-2081629-1-3" title="Most important philosopher" class="sg-input sg-input-text " value="">    </div>
                <!-- /sg-question-options -->
            </div>
            <!-- /sge-box -->
    </div>

You could access the value of the input with an ID like so:

JavaScript:

document.getElementById('sgE-2081629-1-3-element').value

JQuery:

 $('#sgE-2081629-1-3-element').val();

The largest drawback to using the ID is that it makes it more difficult to change your survey and/or reuse your script. If you were to make a copy of the survey, the ID of the input would change. Element IDs are made up of the survey ID, plus the page ID plus the element ID.

Instead, you can assign a CSS Class Name to the question and use that to find the element. You can assign a CSS Class Name to a question on the Layout tab of the question.

Then you would access the value of the input like this:

JavaScript:

document.getElementsByClassName('first'); 

JQuery:

$('.first .sg-input-text').val();

Now, if you were to copy the survey, the script would continue working because the selectors used would remain the same!