Changing the CSS style for multiple check boxes not working

Question

I have an application using firebase which looks like this:

The tick boxes to the right hand side of each 'Book', when clicked, sends the value of the firebase object into a string as shown below:

When clicking these tick boxes, I would like the style of the box and content to change so they turn blue. I have added this piece of code into the on click event:

function select(data, book, key) {

//What I added
document.getElementById('selectBook').style.color="blue";
document.getElementById('selectBook').style.borderColor="blue";
//

var selectBookRef = book;
  document.getElementById('alltext').value += selectBookRef + ',';
}

However, this only turns the first box blue. No matter which check box I click, the first one just changes to blue and the rest stay grey.

Here is the JS code which creates the checkbox icons and the JS to highlight the selected check boxes.

function refreshUI(list) {
var lis = '';
var lis2 = '';
var lis3 = '';


//This generates the 3 columns on the application page

      for (var i = 0; i < 10 && i < list.length; i++) {
        lis += '<li style="width: 150px" data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
      };
      for (var i = 10; i < 20 && i < list.length; i++) {
        lis2 += '<li style="width: 150px" data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
      };
      for (var i = 20; i < 30 && i < list.length; i++) {
        lis3 += '<li style="width: 150px" data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
      };
        document.getElementById('bookList').innerHTML = lis;
        document.getElementById('bookList2').innerHTML = lis2;
        document.getElementById('bookList3').innerHTML = lis3;
    };

//This creates the 3 icons of delete, clear and select. 
function genLinks(key, bkName) {
var links = '';
links += '<a href="javascript:del(\'' + key + '\',\'' + bkName + '\')"><i id="deleteBook" class="material-icons">delete</i></a> ';
links += '<a href="javascript:remove(\'' + key + '\',\'' + bkName + '\')"><i id="removeBook" class="material-icons">clear</i></a> ';
links += '<a href="javascript:select(\'' + key + '\',\'' + bkName + '\')"><i id="selectBook" onclick="functionSelected()" class="material-icons">check</i></a>';
return links;
};

function del(key, bkName) {
var deleteBookRef = buildEndPoint(key);
  deleteBookRef.remove();
}


//This is the function to select and insert the data into the string as well as highlight each checkbox
function select(data, book, key) {
document.getElementById('selectBook').style.color="blue";
document.getElementById('selectBook').style.borderColor="blue";

var selectBookRef = book;
  document.getElementById('alltext').value += selectBookRef + ',';
}

function buildEndPoint (key) {
return new Firebase('https://project04-167712.firebaseio.com/books/' + key);
}

bookList.on("value", function(snapshot) {
var data = snapshot.val();
var list = [];
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            book = data[key].book ? data[key].book : '';
        if (book.trim().length > 0) {
            list.push({
            book: book,
            key: key
            })
        }
    }
}
refreshUI(list);
});

If anybody can help it will be much appreciated.

Thanks, G

You need to use a class, not an ID. An ID must be unique on the page. Therefore it always selects the first one. — Gerard, May 30 '17 at 13:58
[Use a class and `getElementsByClassName`, then loop through all matches.](https://stackoverflow.com/questions/15843581/how-to-correctly-iterate-through-getelementsbyclassname) — Blazemonger, May 30 '17 at 14:09

score 1 · Accepted Answer · answered May 30 '17 at 14:13

The only thing I can see is that you are using the same id tags for multiple different objects on the same page. If you use it at more than one place, use a class! You should never have more than one of the same id because you will be facing a lot of repeating problems..

Changing the CSS style for multiple check boxes not working

1 Answers1