Question: Hi i am new to javascript and having some trouble. 

I need my function to take the user input "recserv" and multiply it by the value of the selected radio button, as well as update if the value is changed or the radio button is changed.

Changing the radio buttons seems to work, but I get an error when the "recserv" value is changed.

Thank you for any help! 

```
<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: 
The reason why you are getting `NaN` is because in your `#recserv` element's inline JS, you are not passing any value into the function when calling it. Therefore, you are multiplying with `undefined` which gives you a `NaN` value.

A quick fix to your issue will simply be letting the method itself retrieve the checked value of your input, and removing the need to pass any arguments to it. This is, however, a *quick fix* and I would never recommend using inline JS: check the next example for a proper solution.

```js
function yeartot() {
  var recserv = +document.getElementById('recserv').value;
  var checkedService = +document.querySelector('input[name="service"]:checked').value;
  document.getElementById("result").value = checkedService * recserv;
}
```

```html
<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">
```

---

**Proposed solution**: I suggest that you:

1. Use `.addEventListener` to listen to changes to your input elements. You can use `document.querySelectorAll([selector])` to select the inputs that you want to bind the `oninput` event listener to. The callback will simply invoke `yeartot()`
2. Invoke `yeartot()` at runtime, so that you get calculated values when the document is loaded.

```js
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();
```

```html
<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">
```
> 
> Change your script into this
> 
> 
> 

```
<script>
      const input = document.getElementById("recserv");
      const result = document.getElementById("result");
      function yeartot(service) {
        const checkedService = document.querySelector(":checked");
        var recserv = Number(document.getElementById("recserv").value);
        document.getElementById("result").value =
          Number(checkedService.value) * Number(input.value);
      }
    </script>

```