将文本输入乘以选定的单选按钮

3回答

潇湘沐

您得到的原因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 onloadyeartot();<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">

皈依舞

简直就是这个……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

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;}//loadwindow.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>