Javascript DOM navigation

[oggiemc]

Im writing a piece of code which allows the user to search by HTML element on a page..The user selects what element they want to search for, and then the code traverses each element highlighting them one by one..The code works fine if the user searches for one element from start to finish..If however, in the middle of one element search they switch their choice to another element the program can start failing for different reasons but primarily because the count goes out of bound e.g say im on elementArray[4] (where count = 4) for one input element.. then the user switches to table element (which may only have a total of 2 elements in the array) then the index will be out of bounds..

Can someone have a look at the code and perhaps suggest a better way of implementing? I think i should have a seperate function to deal with the scenario when a user switches the element choice in the middle of another element search??

Thanks

[{
    type: 'select',
    id: 'findNext',
    label: 'Find next :',
    isChanged: false,
    labelLayout: 'horizontal',
    accessKey: 'R',
    items: [
        ['Form', 'form'],
        ['Input', 'input'], // Checkbox, radio, textfield, button, image
        ['Table', 'table'],
        ['Textarea', 'textarea'],
        ['Select', 'select'],
        ['Anchor', 'a'], // [option, ]
        ['Image', 'img']
    ],
}, {
    type: 'button',
    align: 'left',
    style: 'width:100%',
    label: 'Find Next',
    id: 'findX', 
onClick: function () {
    var dialog = this.getDialog();

    if (typeof currentElement != 'undefined') {
        x = currentElement;
        x.removeAttribute('style'); // Remove the highlight from the current element
    }

    if (count != null) {
        count++;
    } else {
        count = 0;
    }

    if (selectOptionArray == null) {
        selectOptionArray = new Array();
    }

    var selectOption = dialog.getValueOf('find', 'findNext'); // Get user selection e.g input, table etc
    elementArray = documentNode.getElementsByTagName(selectOption);

    currentElement = elementArray[count]; // Keep a reference of the current choice so the higlight can be removed on line 7
    getSelection();

    function getSelection() {
        if (count > 0) { // Check if there are two elements to compare
            areElementsSame();
        }

        if ((elementArray.length > 0) && (count < elementArray.length)) { // Is count out of bounds?
            nextElement(count, elementArray);

        } else {
            alert("Search complete..No elements exist.");
            count = null;
        }
    }

    function areElementsSame() {
        if (count >= elementArray.length) {
            count = 0;
            nextElement(count, elementArray);
        } else if (elementArray[count].nodeName == x.nodeName) {
            nextElement(count, elementArray);
        } else {
            count = 0;
            nextElement(count, elementArray);
        }
    }

    function nextElement() {
        if (count < elementArray.length) {
            elementArray[count].setAttribute('style', 'background-color: blue');
            elementArray[count].scrollIntoView(true);
        } else {
            alert('count is > elementArray.length, all elements navigated');
        }
    }
}