Question

I have this JavaScript function that highlight table TD’s when clicked on each individual TD

<script type="text/javascript">
    window.onload = function(){
    var all = document.getElementsByClassName("clicker");
    for (var i=0;i<all.length;i++) {
        all[i].onclick = inputClickHandler;       
    }
};

function inputClickHandler(e){
    e = e||window.event;
    var tdElm = e.target||e.srcElement;
    if(tdElm.style.backgroundColor == 'rgb(0, 153, 0)'){
        tdElm.style.backgroundColor = '#fff';
    } else {
        tdElm.style.backgroundColor = '#009900';
    }
}
    </script>

And I have a table say 8 by 8 and they are all square. Now above the table I have a form with a selection menu which looks like this.

<form id="filter">
<select id="highlights" name="highlights">
<option value="0"> Select... </option>
<option value="20"> 20 </option>
<option value="24"> 24 </option>
<option value="28"> 28 </option>
<option value="30"> 30 </option>
</select>

Basically what I want is for the user to select an option from the highlights form, so say I pick “24”, it then only allows me to highlight “24” squares in the table. If I change from “24” to “28” im then allowed to highlight “28” and no more than what is selected.
How would I do this?

Answer 1

Just do something like this:

var max = 0, highlighted = 0
document.getElementById('highlights').onchange = function () {
  max = this.value
}
...
function inputClickHandler(e){
  e = e||window.event;
  var tdElm = e.target||e.srcElement;
  if(tdElm.style.backgroundColor == 'rgb(0, 153, 0)'){
    highlighted--
    tdElm.style.backgroundColor = '#fff';
  } else if (highlighted != max) {
    highlighted++
    tdElm.style.backgroundColor = '#009900';
  }
}