Javascript - Changing Class Name using an Array

I'm trying to change all fields that have a name 'make' or 'model' that's in an array list. I'm sure I'm not doing something simple to make this work. But this function below does not work. How do I change the class name of multiple fields from an array list?

CSS
hide {
display: none;
}

array = ['make','model'];

function deactivateField( array ) {
    count = array.length;
    for (i = 0; i < count; i++) {
        array[i].className = 'hide' );
    }
}


<td id="make" name="make" class="show">aaa</td>
<td id="make" name="make" class="show">bbb</td>
<td id="make" name="make" class="show">ccc</td>

<td id="model" nam开发者_运维问答e="model" class="show">111</td>
<td id="model" name="model" class="show">222</td>
<td id="model" name="model" class="show">333</td>

---

First of all, you can't have more than one element with a given ID in an HTML page.

Second, when you do

 array[i].className = 'hide'

you are asking for the property className of the string taken from the array; the equivalent of doing "make".className. Naturally, this doesn't work; your intention is to find the element with the id or name "make", and then change the className of that element, not of the word "make".

If you really are passing an array of unique IDs, then you can do

for (i = 0; i < count; i++) {
    var el = document.getElementById(array[i]);
    el.className = 'hide' );
}

but again, this will require that every element has it's own unique ID.

---

My answer assumes that you will give each element a unique ID (because that's not valid) and that the value of the name attributes will stay the same.

function deactivateField( array ) {
    var i = 0, j = 0, elements;
    elements = document.getElementsByTagName("td");
    for (; i< elements.length; i++) {
      for (; j<array.length; j++) {
        if (elements[i].name === array[j]) {
           elements[i].className = "hide";
        }
      }
   }
}

---

First off, "id" is meant to be unique. With jQuery you could do this (untested). I don't know off hand if jQuery will attempt to handle multiple elements with the same "id":

array = ['make','model'];
function deactivateField( array ) {
    count = array.length;
    for (i = 0; i < count; i++) {
        $('#' + array[i]).removeClass('show').addClass('hide');
    }
}

---

First you can't have multiple elements with the same id. Id's are meant to be unique. Also the array you have doesn't actually reference any of the elements, it's just an array of strings. You will need to use a selector such as document.getElementsByTagName to grab a group of selectors (since IE doesn't support getElementsByClassName) and then loop through them for the elements that have the class that you want.

array = ['make','model'];
elArray = document.getElementsByTagName("td")
function deactivateField( array ) {
    count = elArray.length;
    for (i = 0; i < count; i++) {
        for(x = 0; x < array.length; x++)
        {
            if(array[x].test(elArray[i]))
            {
                  elArray[i].className = array[x] + " hide";
            }
        }
     }        

<td name="make" class="make show">aaa</td>
<td name="make" class="make show">bbb</td>
<td  name="make" class="make show">ccc</td>

<td  name="model" class="model show">111</td>
<td  name="model" class="model show">222</td>
<td  name="model" class="model show">333</td>

---

The array does not contain the elements themselves, only strings that correspond to the required ids. Keep IDs unique. Then use the DOM in order to get the node: document.getElementById('idName');. Then, you will be able to manipulate the actual element.

Another thing, the CSS should be .hide, as hide attempts to find such tag.

---

Here's how I got this to work:

function deactivateField( field_array ) {
    cnt = field_array.length;
    for (a = 0; a < cnt; a++) {
        changeClassByName( field[a], 'hide' );
    }
}

function changeClassByName( name, classname ) {
    var nm = document.getElementsByName( name );
    count = nm.length;
    for(b = 0; b < count; b++){
        nm[b].className = classname;
    }
}