First, I am not a professional. This is a personal project, so apologies if my terminology or POV of the issue is wrong. I’m working on a special kind of calculator that requires user input for the calculations. The calculator is made of several tables, but the first table is the most important one. It simply requires the user to divide a single “unit” into ratios that will be used throughout the rest of the calculator. These numbers must equal 100 or else the rest of the output will be incorrect.
I would like for the “TOTAL (%)” to have a function that checks that the number calculated in the textbox equals 100. If it doesn’t, I would like for the number to turn red along with a warning.
The issue I’m having is that the function doesn’t seem to be working. I’ve concluded that it could be one or more of the following reasons:
- The function simply doesn’t work as written.
- The function isn’t being triggered on the right element.
- The function isn’t being triggered by the right event.
Here’s the code that I’ve written:
function valTotal() {
var x = document.getElementById('t1total');
var y = 100;
if (x > y) {
alert("Warning! Your total is greater than 100%. Please adjust your ratios above so that the total equals 100% before continuing.");
x.style.color = "#cf0911";
return false;
}
}
function myFun0() {
let water = document.getElementById('t1water').value;
let ingr1 = document.getElementById('t1ingr1').value;
let ingr2 = document.getElementById('t1ingr2').value;
let ingr3 = document.getElementById('t1ingr3').value;
let ingr4 = document.getElementById('t1ingr4').value;
let ingr5 = document.getElementById('t1ingr5').value;
let ingr6 = document.getElementById('t1ingr6').value;
let total = Number(water) + Number(ingr1) + Number(ingr2) + Number(ingr3) + Number(ingr4) + Number(ingr5) + Number(ingr6);
document.getElementById("t1total").value = total;
}body {
font-family: monospace;
}
table,
td {
border: 1px solid black;
border-collapse: collapse;
}
.invis {
border-style: hidden;
}
.txcenter {
text-align: center;
}
.txbox1 {
width: 50px;
}<!DOCTYPE html>
<html>
<head>
</head>
<!--Calculator-->
<body>
<div>
<h2 id="calc">Substrate Calculator</h2>
<table class="invis">
<tr>
<td>
<!--Table 1: SUB RATIO-->
<table style="float: left">
<tr style="background-color:#751e0b">
<td colspan="2">
<div class="txcenter">
<b style="color:white">SUB RATIO</b>
</div>
</td>
</tr>
<!--Table 1: SUB RATIO > Water (%)-->
<tr>
<td>
<div>Water (%)</div>
</td>
<td>
<input class="txbox1" type="textbox" id="t1water" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
</td>
</tr>
<!--Table 1: SUB RATIO > Ingredient 1 (%)-->
<tr>
<td>
<div>Ingredient 1 (%)</div>
</td>
<td>
<input class="txbox1" type="textbox" id="t1ingr1" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
</td>
</tr>
<!--Table 1: SUB RATIO > Ingredient 2 (%)-->
<tr>
<td>
<div>Ingredient 2 (%)</div>
</td>
<td>
<input class="txbox1" type="textbox" id="t1ingr2" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
</td>
</tr>
<!--Table 1: SUB RATIO > Ingredient 3 (%)-->
<tr>
<td>
<div>Ingredient 3 (%)</div>
</td>
<td>
<input class="txbox1" type="textbox" id="t1ingr3" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
</td>
</tr>
<!--Table 1: SUB RATIO > Ingredient 4 (%)-->
<tr>
<td>
<div>Ingredient 4 (%)</div>
</td>
<td>
<input class="txbox1" type="textbox" id="t1ingr4" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
</td>
</tr>
<!--Table 1: SUB RATIO > Ingredient 5 (%)-->
<tr>
<td>
<div>Ingredient 5 (%)</div>
</td>
<td>
<input class="txbox1" type="textbox" id="t1ingr5" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
</td>
</tr>
<!--Table 1: SUB RATIO > Ingredient 6 (%)-->
<tr>
<td>
<div>Ingredient 6 (%)</div>
</td>
<td>
<input class="txbox1" type="textbox" id="t1ingr6" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
</td>
</tr>
<!--Table 1: SUB RATIO > TOTAL (%)-->
<tr>
<td>
<div>TOTAL (%)</div>
</td>
<td>
<input class="txbox1" type="textbox" id="t1total" onchange="valTotal()" readonly>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>is just the first table of the calculator. The issue I’m having is with the “TOTAL (%)” field which is the only place where the validation function will be used.
Many many thanks.
EDIT: The function in question is the valTotal() function.
