Updated the totals boxes to work

htdocs/index.html

@@ -171,9 +171,9 @@
             </TR>
             <TR>
                 <TD style='float: right'>Total:</TD>
-                <TD><INPUT type='text' name="totalBox1" id="totalBox1"></TD>
+                <TD><INPUT type='text' name="totalBox1" id="totalBox1" readonly></TD>
                 <TD style='float: right'>Total:</TD>
-                <TD id='total2'><INPUT type='text' name="totalBox2" id="totalBox2"></TD>
+                <TD><INPUT type='text' name="totalBox2" id="totalBox2" readonly></TD>
             </TR>
         </TABLE>
     </DIV>
@@ -325,16 +325,71 @@ const inputs = document.querySelectorAll("#r1, #r2, #r3, #r4, #r5, #r6, #r7, #r8
 // Initialize a variable to hold the total
 let total = 0;
 
+// Define a function to update the total
+function updateTotal() {
+  // Reset the total to zero
+  total = 0;
   // Loop through each input element and add its value to the total
   inputs.forEach(input => {
-  total += Number(input.value);
+    // Remove the dollar sign from the value and convert it to a number
+    let value = Number(input.value.replace("$", ""));
+    // Add the value to the total
+    total += value;
+  });
+  // Output the updated total to the console
+  console.log(total);
+  // Display the updated total in the input box with ID "totalBox1"
+  document.querySelector('#totalBox1').value = '$' + total.toFixed(2);
+}
+
+// Call the updateTotal function initially to calculate the total based on the initial values of the input fields
+updateTotal();
+
+// Loop through each input element and add an event listener that calls the updateTotal function whenever its value changes
+inputs.forEach(input => {
+  input.addEventListener("input", updateTotal);
+});
+</SCRIPT>
+
+<SCRIPT>
+//Script to tally up all of the totals
+// get all the cells in the column
+// Get all input elements with IDs r1 through r14
+const inputs2 = document.querySelectorAll("#t1, #t2, #t3, #t4, #t5, #t6, #t7, #t8, #t9, #t10, #t11, #t12, #t13, #t14");
+const sliders2 = document.querySelectorAll("#s1, #s2, #s3, #s4, #s5, #s6, #s7, #s8, #s9, #s10, #s11, #s12, #s13, #s14");
+
+// Initialize a variable to hold the total
+let total2 = 0;
+
+// Define a function to update the total
+function updateTotal() {
+  // Reset the total to zero
+  total2 = 0;
+  // Loop through each input element and add its value to the total
+  inputs2.forEach(input => {
+    // Remove the dollar sign from the value and convert it to a number
+    let value2 = Number(input.value.replace("$", ""));
+    // Add the value to the total
+    total2 += value2;
+  });
+  // Output the updated total to the console
+  console.log(total2);
+  // Display the updated total in the input box with ID "totalBox2"
+  document.querySelector('#totalBox2').value = '$' + total2.toFixed(2);
+}
+
+// Call the updateTotal function initially to calculate the total based on the initial values of the input fields
+updateTotal();
+
+// Loop through each input element and add an event listener that calls the updateTotal function whenever its value changes
+inputs2.forEach(input => {
+  input.addEventListener("input", updateTotal);
 });
 
-// Output the total to the console
-console.log(total);
-
-// display the total in the input box
-document.querySelector('#totalBox1').value = total.toFixed(2); // change the selector to the ID of the input box
+// Loop through each slider element and add an event listener that calls the updateTotal function whenever its value changes
+sliders2.forEach(slider => {
+  slider.addEventListener("input", updateTotal);
+});
 </SCRIPT>
 </BODY>
 </DOCTYPE>