CODEWITHSUNDEEP
javascripthtml
Haydn Oleson
Haydn Oleson

Reputation: 3

Multiplying a text input by selected radio button

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

Upvotes: 0

Views: 107

Answers (5)

Mister Jojo
Mister Jojo

Reputation: 22320

simply this...

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>

-- adding a form makes things easier if each entry (or output) has a name.
-- using a form element, you do not need to use any ID, and you do not need to see which radio button is checked, you directly take the selected value
-- and do not use a change event but use input event

Upvotes: 1

Jens Ingels
Jens Ingels

Reputation: 816

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>

Upvotes: 0

Terry
Terry

Reputation: 66113

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.

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

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.

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

Upvotes: 1

Ahmed Kesha
Ahmed Kesha

Reputation: 830

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>

Upvotes: 0

user7013467
user7013467

Reputation:

yeartot method has a parameter and when you use yeartot() in onchange property of input cause undefined value in service parameter.undefined value is not a number and take error.

Upvotes: 0

Related Questions