Question

I am having trouble figuring out how to set arrays, on pageload, that contains all the class names and id names of every input within a div with the id of boardinput.

<div id="boardinput">
    <input id='R1C1' class="blank" maxlength="1" />
    <input id='R1C2' class="tw" maxlength="1" />
    <input id='R1C3' class="blank" maxlength="1" />
    <input id='R1C4' class="tw" maxlength="1" />
    <input id='R1C5' class="dl" maxlength="1" />
    <input id='R1C6' class="blank" maxlength="1" />
</div>

so array1 = [“R1C1″,”R1C2″,”R1C3″,”R1C4″,”R1C4″,”R1C5″,”R1C6”]

and array2 = [“blank”,”tw”,”blank”,”tw”,”dl”,”blank”]

I want to do this so that I can revert back to the original class and id after a change has been made. Thanks in advance for any help.

Answer 1

Since you didn’t ask for jQuery, here’s a pure JS solution:

var inputs = document.getElementById('boardinput')
                     .getElementsByTagName('input');

var input_IDs = new Array();
var input_classes = new Array();

for (var i = 0; i < inputs.length; i++) {
    input_IDs[i] = inputs[i].id;
    input_classes[i] = inputs[i].className;
}

• DEMO