Question

my javascript function is only changing two of 4 classes. If I click it again it changes the third one but then completely ignores the last one.

function move(obj,obj2) {
    var _elements = document.getElementsByClassName(obj);
    document.getElementsByClassName(obj2).className = 'none';

    for( var i = 0; i < _elements.length; i ++){
        _elements[i].className ='none';
    }
}

<a href="javascript: move('bigbox','bigbox_submit');"  id="closebigbox" >Clear</a>

<form>
    <input type="text" class="bigbox" /><br/>
    <input type="text" class="bigbox" /><br/>
    <input type="text" class="bigbox" /><br/>
</form>
<a href="javascript:" class="bigbox_submit" >Submit</a>

How do I make it stop doing this and execute at the same time.

Answer 1

The method document.getElementsByClassName() returns a NodeList, which is a “live” object. That is, as the DOM changes, the NodeList instance changes with it. So, each time you change the class of one of the elements in your node list, that element is then removed from the node list because it no longer matches the class. You can use a while loop instead:

var _elements = document.getElementsByClassName(obj);
while (_elements.length) {
    _elements[0].className ='none';
}

The second problem is that you are assigning a property named className to a NodeList object. This will not affect any of the elements in that NodeList object. You need to set the className of the elements in the NodeList.

document.getElementsByClassName(obj2)[0].className = 'none';