Question

嗨，我是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">

Answer 1

简单地...

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，也无需查看选中了哪个单选按钮，您可以直接获取所选值
-并且不使用更改事件，而使用输入事件

Answer 2

获取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">

Answer 3

yeartot方法具有一个参数，当您在输入的onchange属性中使用yeartot（）时，会导致服务参数中的值不确定。该值不是数字，并且会出错。

Answer 4

将脚本更改为此

magit

Answer 5

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>

通过选定的单选按钮将文本输入相乘

5 个答案: