HTML Form not outputting anything. Getting NaN - html

Question

I'm trying to get a form to output a number value based on the outcome of two fields. A value input and a radio selection but I can't seem to get it to work.
<form oninput="retVal.value=parseInt(pavVal.value)-(parseInt(pavVal.value)*parseInt(pavCAT.value))">
<table>
<tr>
<td>
<label for="pavVal"><b>PAV:</b></label>
</td>
<td>
<input type="number" id="pavVal">
</td>
</tr>
<tr>
<td>
<label for="pavCAT" ><b>CAT:</b></label>
<td>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.3">
<label for="0.3" > N (30%)</label>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.2">
<label for="0.2" > S (20%)</label>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.1">
<label for="0.1"> B (10%)</label>
</td>
</tr>
<tr>
<td>
<label for="retVal"><b>Retention Value:</b></label>
</td>
<td>
<output name="retVal" for="pavVal pavCAT"></output>
</td>
</tr>
</table>
</form>
Anyone able to tell me where I'm going wrong>

Answer 1

Ids must be unique -- there were three #pavCAT. When the browser is told to do anything with #pavCAT, it will find the first #pavCAT do whatever it was supposed to do then quit, leaving the other 2 #pavCATs untouched as if they never existed. The easiest solution is to suffix each id with a number.
The rest of the code should work since in this case the id #pavCAT is just as accessible as the name [name="pavCAT"].
Also, the HTML had checkmarks not radios.
The inline event handler is now streamlined:
oninput = "retVal.value = pavVal.value - (pavVal.value * pavCAT.value)"
Note that parseInt() isn't used to convert the string values into numbers. That's because the strings are being coerced into numbers by the use of these operators: - and *.
<form id='calc' oninput = "retVal.value = pavVal.value - (pavVal.value * pavCAT.value)">
<table>
<tr>
<td>
<label for="pavVal"><b>PAV:</b></label>
</td>
<td>
<input id="pavVal" type="number">
</td>
</tr>
<tr>
<td>
<label for="pavCAT"><b>CAT:</b></label>
</td>
<td>
<input id="pavCAT3" name="pavCAT" type="radio" value="0.3">
<label for="pavCAT3"> N (30%)</label>
<input id="pavCAT2" name="pavCAT" type="radio" value="0.2">
<label for="pavCAT2"> S (20%)</label>
<input id="pavCAT1" name="pavCAT" type="radio" value="0.1">
<label for="pavCAT1"> B (10%)</label>
</td>
</tr>
<tr>
<td>
<label for="retVal"><b>Retention Value:</b></label>
</td>
<td>
<output name="retVal" for="pavVal pavCAT"></output>
</td>
</tr>
</table>
</form>

Answer 2

Your formula is working, but you assigned the same ID for the pavCat checkbox elements, thus returning NaN and not the correctly assigned value - try it yourself with removing/commenting out two ot the pavCAT elements.
imho is a checkbox the wrong UI element - go for a single select dropdown or even better a radio input.
Also parseInt should be parseFloat instead for pavCat. Anyways it's a little bit over the top in this situation and you could totally remove it in this simple example - maybe you have more context to justify parsing it.
<input type="radio" id="pavCat1" name="pavCAT" value="0.3">
<label for="0.3" > N (30%)</label>
<input type="radio" id="pavCat2" name="pavCAT" value="0.2">
<label for="0.2" > S (20%)</label>
<input type="radio" id="pavCat3" name="pavCAT" value="0.1">
<label for="0.1"> B (10%)</label>
https://jsfiddle.net/p9v1f53w/16/