javascript - 如果我点击我的 optA1，就会有一个 NAN 输出

Question

大家好，任何人都可以帮助我..如果我单击我的 optA1 单选按钮，我有一个烦人的 NAN 输出...任何人都可以帮我找出问题所在用我的代码。

每次我点击optA1我总是得到NAN的结果...如果我点击其他我得到正确的结果..这是为什么？

html代码:

<td width="369"><input autocomplete="off" class="number" placeholder=" 1.)" name="name1" type="text"  value="" required size="41" id="name1" readonly /></td>

            <td width="113">
            <input id="textboxid" type="radio" name="optA1" value="1" onClick="optTotal1()" />1
            <input id="textboxid" type="radio" name="optA1" value="2" onClick="optTotal1()" />2
            <input id="textboxid" type="radio" name="optA1" value="3" onClick="optTotal1()" />3
            </td>
            <td width="109">
            <input id="textboxid" type="radio" name="optB1" value="1" onClick="optTotal1()" />1
            <input id="textboxid" type="radio" name="optB1" value="2" onClick="optTotal1()" />2
            <input id="textboxid" type="radio" name="optB1" value="3" onClick="optTotal1()" />3
            </td>
            <td width="79">
            <input id="textboxid" type="radio" name="optC1" value="1" onClick="optTotal1()" />1
            <input id="textboxid" type="radio" name="optC1" value="2" onClick="optTotal1()" />2
            </td>
            <td width="84">
            <input id="textboxid" type="radio" name="optD1" value="1" onClick="optTotal1()" />1
            <input id="textboxid" type="radio" name="optD1" value="2" onClick="optTotal1()" />2
            </td>
            <td width="53"><input class="number" id="textboxid" type="text" name="total1" onKeyUp="optTotal1()" readonly size="3" /></td>
            <td width="87"><input class="number" id="textboxid" name="remarks1" type="text"  value="" required size="8" readonly style="text-align:right;width:89px !important;"/></td>

总脚本代码:

<script>
function optTotal1()
{
var a1 = document.querySelector('input[name="optA1"]:checked');
var b1 = document.querySelector('input[name="optB1"]:checked');
var c1 = document.querySelector('input[name="optC1"]:checked');
var d1 = document.querySelector('input[name="optD1"]:checked');
if (a1 != null)
    a1 = parseFloat(a1.value);
else
    a1 = 0;
if (b1 != null)
    b1 = parseFloat(b1.value);
else
    b1 = 0;
if (c1 != null)
    c1 = parseFloat(c1.value);
else
    c1 = 0;
if (d1 != null)
    d1 = parseFloat(d1.value);
else
    d1 = 0;

document.frm.total1.value=parseFloat(a1)+parseFloat(b1)+parseFloat(c1)+parseFloat(d1);
}
</script>

Answer 1

问题出在这一行。没有任何名为 frm

的元素

document.frm.total1.value=parseFloat(a1).....

我建议使用唯一的 ID 而不是相同的 ID。喜欢

textboxid1
textboxid2
textboxid3

要将值输入到结果框中，您可以这样做。

<input class="number" id="textboxid11" type="text" name="total1" onKeyUp="optTotal1()" readonly size="3" />
//-----------------put id-----^

//get the input tag by id, put result inside it
document.getElementById('textboxid11' ).value = (a1 + b1 + c1 + d1);

因为没有必要使用 parseFloat() 两次，因为它已经在连接值时使用了。

DEMO