你好，我是 javascript 新手，遇到了一些麻烦。我需要我的函数来获取用户输入“recserv”并将其乘以所选单选按钮的值，以及在值更改或单选按钮更改时进行更新。更改单选按钮似乎有效，但是当更改“recserv”值时出现错误。感谢您的任何帮助！<script>function yeartot(service) { var recserv = parseFloat(document.getElementById('recserv').value); document.getElementById("result").value = service*recserv;}</script><body><p>Select the frequency</p> <input onclick="yeartot(this.value)" type="radio" name="service" value="11">Monthly<br> <input onclick="yeartot(this.value)" type="radio" name="service" value="6" checked> Bi-Monthly<br><br> Recurring Service Amount <input onchange="yeartot()" id="recserv" value=0><br/><br/> Total for year <input type="text" id="result">
3 回答
潇湘沐
TA贡献1816条经验 获得超6个赞
您得到的原因NaN是因为在#recserv元素的内联 JS 中，您在调用函数时没有将任何值传递到函数中。因此，您乘以undefined它就会得到一个NaN值。
解决问题的快速方法就是让方法本身检索输入的检查值，并且无需向其传递任何参数。然而，这是一个快速修复，我永远不会建议使用内联 JS：检查下一个示例以获得正确的解决方案。
function yeartot() {
var recserv = +document.getElementById('recserv').value;
var checkedService = +document.querySelector('input[name="service"]:checked').value;
document.getElementById("result").value = checkedService * recserv;
}
<p>Select the frequency</p>
<input onclick="yeartot()" type="radio" name="service" value="11">Monthly<br>
<input onclick="yeartot()" type="radio" name="service" value="6" checked> Bi-Monthly<br><br> Recurring Service Amount <input onchange="yeartot()" id="recserv" value=0><br/><br/> Total for year <input type="text" id="result">
建议的解决方案：我建议您：
用于
.addEventListener监听输入元素的更改。您可以使用它document.querySelectorAll([selector])来选择要将oninput事件侦听器绑定到的输入。回调将简单地调用yeartot()在运行时调用
yeartot()，以便在加载文档时获得计算值。
function yeartot() {
var recserv = +document.getElementById('recserv').value;
var checkedService = +document.querySelector('input[name="service"]:checked').value;
document.getElementById("result").value = checkedService * recserv;
}
document.querySelectorAll('#recserv, input[name="service"]').forEach(function(el) {
el.addEventListener('change', function() {
yeartot();
});
});
// Also, might want to run the first round of computation onload
yeartot();
<p>Select the frequency</p>
<input type="radio" name="service" value="11">Monthly<br>
<input type="radio" name="service" value="6" checked> Bi-Monthly<br><br> Recurring Service Amount <input id="recserv" value=0><br/><br/> Total for year <input type="text" id="result">
皈依舞
TA贡献1851条经验 获得超3个赞
简直就是这个……
document.getElementById('my-form').addEventListener('input', function () {
this.result.textContent = parseFloat(this.recserv.value) * parseInt(this.service.value)
})
<form id="my-form" onsubmit="return false">
<p>Select the frequency</p>
<input type="radio" name="service" value="11">Monthly
<br>
<input type="radio" name="service" value="6" checked> Bi-Monthly
<br><br>
Recurring Service Amount <input name="recserv" value="0">
<br /><br />
Total for year <output name="result"></output>
</form>
-- 如果每个条目（或输出）都有名称，则添加表单会使事情变得更容易。
-- 使用表单元素，不需要使用任何ID，也不需要查看哪个单选按钮被选中，直接取选择的值 --
并且不使用change事件而是使用input事件
宝慕林4294392
TA贡献2021条经验 获得超8个赞
const setup = () => {
const serviceInputs = document.querySelectorAll('input[name="service"]');
serviceInputs.forEach(e => e.addEventListener('click', yeartot));
const recserv = document.querySelector('#recserv');
recserv.addEventListener('change', yeartot);
}
const yeartot = (service) => {
const checkedInput = document.querySelector('input:checked');
const recserv = document.querySelector('#recserv');
const serviceNumber = parseFloat(checkedInput.value, 10);
const recservNumber = parseFloat(recserv.value, 10);
const result = document.querySelector('#result');
result.value = serviceNumber * recservNumber;
}
//load
window.addEventListener('load', setup);
<body>
<p>Select the frequency</p>
<input type="radio" name="service" value="11">Monthly<br>
<input type="radio" name="service" value="6" checked> Bi-Monthly<br><br>
Recurring Service Amount <input id="recserv" value="0"><br/><br/>
Total for year <input type="text" id="result">
</body>
- 3 回答
- 0 关注
- 101 浏览
添加回答
举报
0/150
提交
取消