Checkbox sum total colour changer + auto-tick checkbox in second group

Question

I have the following code that has 3 parts - 2 sets of checkboxes and some auto-displaying text dependant on the 2nd checkboxes.

1. Top row of checkboxes that provide a total numerical value, to allow

• the total value to automatically change the default (red) coloured cell to yellow when the value is 40+ and green when it reaches 60+, and reverts back in reverse (ie if below 60 then goes back to yellow, and below 40 goes back to default colour),
• automatically enable/tick one of the 2nd set of checkboxes (eg 'Medium') when the value reaches say 40+ (auto-remove the tick if it falls below 40, etc.)
• automatically enable/tick another of the 2nd checkboxes (eg 'Hard') when the value reaches 60+ (auto-remove if it falls below that value)

2. Ensure when the 2nd check box is auto-enabled from 1) above, the text auto-appears (as though it was manually ticked), and if auto-unticked from above 1) auto-remove the text,
3. Still allow the 2nd check boxes to be menaully adjusted and displayed/not-display the text (ie if auto-enabled as above, allow manual unticking to remove the text, etc.)

 function addTotals() { var input = document.getElementsByName("score"); var total = 0; for (var i = 0; i < input.length; i++) { if (input[i].checked) { total += parseFloat(input[i].value); } } document.getElementsByName("total")[0].value = "" + total.toFixed(0); } function displayText(checkBoxElm,textBoxId) { let textBox = document.getElementById(textBoxId); if (checkBoxElm.checked){ textBox.style.display = "block"; } else { textBox.style.display = "none"; } }

 <table id="scorecard" border="1"> <tr> <td><input name="score" value="40" type="checkbox" onclick="addTotals()" />Impossible</td> <td><input name="score" value="30" type="checkbox" onclick="addTotals()" />Hard</td> <td><input name="score" value="20" type="checkbox" onclick="addTotals()" />Medium</td> <td><input name="score" value="10" type="checkbox" onclick="addTotals()" />Easy</td> <td bgcolor="red" rowspan="2" style="width:90px;text-align:center" ><input style="width:60px;text-align:center" value="0" readonly="readonly" type="text" name="total" /></td> </tr> </table> <table id="report" border="1"> <tr> <td><input type="checkbox" id="box1" onclick="displayText(this,'textBox1')"><label for="box1">Option 1</label></td> <td><input type="checkbox" id="box2" onclick="displayText(this,'textBox2')"><label for="box2">Option 2</label></td> <td><input type="checkbox" id="box3" onclick="displayText(this,'textBox3')"><label for="box3">Option 3</label></td> <td><input type="checkbox" id="box4" onclick="displayText(this,'textBox4')"><label for="box4">Option 4</label></td> <td><input type="checkbox" id="box5" onclick="displayText(this,'textBox5')"><label for="box5">Option 5</label></td> </tr> </table> <p id="main" style="display:block" contenteditable="true"> <span id="textBox1" style="display:none">Pears.</span> <span id="textBox2" style="display:none">Apples.</span> <span id="textBox3" style="display:none">Oranges.</span> <span id="textBox4" style="display:none">Lemons.</span> <span id="textBox5" style="display:none">Excel.</span> <p>

** edit: (using only javascript and html on 1 page (no db's, externals, etc.)). I was having issues with the onclick cascading effect of colour changing and checkbox ticking, especially on the reversals, and my code got all messed up :(

Answer 1

Based on the total value which you already have, you can decide the color by simple if-else condition, and by traveling through each checkbox from min value to max you can go on deciding if checkbox needs to be checked or not

function addTotals() {
var input = document.getElementsByName("score");
var total = 0;
for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
        total += parseFloat(input[i].value);
    }
}
document.getElementsByName("total")[0].value = "" + total.toFixed(0);
for(travel through each checkbox from min value to max)
{
  if(total >= checkbox value)
  {
    total= total - checkox value
    checkbox.checked=true
  }
  else{
   checkbox.checked=false
  }
}
if(condition1)
{
  target.bg = "color1"
}
else if(condition2)
{
  target.bg = "color2"
}
so on for rest
}