How to perform calculations using inputs from multiple choice

I would like to do simple calculations based of user input. Each put has a different value, so therefore changes the final answer.

Bellow is the html code:

<form action="/action_page.php">
                              <p style="font-size:20px" for="House Type">What kind of house do you live in?</p>
                              <input type="radio" id="Detached" name="House Type" value="1.14" onclick="calc()" />
                              <label style="font-size:15px" for="Detached">Detached</label><br>
                              <input type="radio" id="Semi Detached" name="House Type" value="1.04" onclick="calc()" />
                              <label style="font-size:15px" for="Semi Detached">Semi Detached</label><br>
                              <input type="radio" id="Terrace" name="House Type" value="0.925" onclick="calc()" />
                              <label style="font-size:15px" for="Terrace">Terrace</label><br>
                              <input type="radio" id="Flat" name="House Type" value="0.83" onclick="calc()" />
                              <label style="font-size:15px" for="Flat">Flat</label>

The calculation I want to do is:

Input multiply by another number. How do I code the JavaScript for this

[off-topic]
@kultar97 when you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.
[/off-topic]

1 Like

Hi @kultar97, in order to get the input value you need to pass the click event to the calc() function:

<input 
  type="radio" 
  id="Detached" 
  name="House Type" 
  value="1.14" 
  onclick="calc(event)" 
>

This event object has a target property referencing the element that triggered the event (your radio input), and that element again has a value property; note though that this value is always a string, so you should convert it to a number for multiplication:

function calc (event) {
  var value = Number(event.target.value)
  // Do some multiplication
  alert(value * 42)
}

The above code is rather ugly however, in that the event variable in the onclick attribute seems to coming from nowhere; better use JS only in the first place using addEventListener():

function calc (event) {
  var value = Number(event.target.value)
  alert(value * 42)
}

var houseTypes = document.querySelectorAll('input[name="House Type"]')

houseTypes.forEach(function (element) {
  element.addEventListener('click', calc)
})

You can read more on this topic here:

1 Like

Hello m3g4p0p, thank your for the help!! I have more than one multiple choice sections, that require the same thing,

For example:

  <form action="/action_page.php">
                              <hr style="height:2px;border-width:0;color:blue;background-color:chocolate">
                              <p style="font-size:20px" for="House Type">What kind of house do you live in?</p>
                              <input type="radio" id="Detached" name="House Type" value="1.14"  onclick="calc(event)" />
                              <label style="font-size:15px" for="Detached">Detached</label><br>
                              <input type="radio" id="Semi Detached" name="House Type" value="1.04" onclick="calc(event)" />
                              <label style="font-size:15px" for="Semi Detached">Semi Detached</label><br>
                              <input type="radio" id="Terrace" name="House Type" value="0.925" onclick="calc(event)" />
                              <label style="font-size:15px" for="Terrace">Terrace</label><br>
                              <input type="radio" id="Flat" name="House Type" value="0.83" onclick="calc(event)" />
                              <label style="font-size:15px" for="Flat">Flat</label>
                              <hr style="height:2px;border-width:0;color:blue;background-color:chocolate">
                                <form action="/action_page.php">
                                  <p style="font-size:20px" for="Age">What is the age of House?</p>
                                  <input type="radio" id="Pre 1945" name="Age" value="1" onclick="calc(event)" />
                                  <label style="font-size:15px" for="Pre 1945">Pre 1945</label><br>
                                  <input type="radio" id="1945-1965" name="Age" value="1" onclick="calc(event)" />
                                  <label style="font-size:15px" for="1945-1965">1945-1965</label><br>
                                  <input type="radio" id="1966-1999" name="Age" value="0.93" onclick="calc(event)" />
                                  <label style="font-size:15px" for="1966-1999">1966-1999</label><br>
                                  <input type="radio" id="2000-2009" name="Age" value="0.81" onclick="calc(event)" />
                                  <label style="font-size:15px" for="2000-2009">2000-2009</label><br>
                                  <input type="radio" id="2010 -" name="Age" value="0.8" onclick="calc(event)" />
                                  <label style="font-size:15px" for="2010 -">2010 -</label><br>
                                  <hr style="height:2px;border-width:0;color:blue;background-color:chocolate">
                                  <form action="/action_page.php">

I am however confused on how `to separate the two in the JavaScript coding. As it keeps thinking both the age and household type are the same, and therefore only gives me one value. Could you help with this issue?

Not quite sure what you mean – could you post the code doing this and what you’d expect it to do?

Hey m3g4p0p,

So the HTML is:

<form action="/action_page.php">
                              <hr style="height:2px;border-width:0;color:blue;background-color:chocolate">
                              <p style="font-size:20px" for="House Type">What kind of house do you live in?</p>
                              <input type="radio" id="Detached" name="House Type" value="1.14"  onclick="calc(event)" />
                              <label style="font-size:15px" for="Detached">Detached</label><br>
                              <input type="radio" id="Semi Detached" name="House Type" value="1.04" onclick="calc(event)" />
                              <label style="font-size:15px" for="Semi Detached">Semi Detached</label><br>
                              <input type="radio" id="Terrace" name="House Type" value="0.925" onclick="calc(event)" />
                              <label style="font-size:15px" for="Terrace">Terrace</label><br>
                              <input type="radio" id="Flat" name="House Type" value="0.83" onclick="calc(event)" />
                              <label style="font-size:15px" for="Flat">Flat</label>
                              <hr style="height:2px;border-width:0;color:blue;background-color:chocolate">
<p id="Type"> House Type Here</p>

And thanks to your help, the Java script code is:

    function calc(event) {
                      var value = Number(event.target.value);
                      var coef= value*5.5;
                      document.getElementById("Type").innerHTML = coef;
                    }
                    var houseTypes = document.querySelectorAll('input[name="House Type"]')
                    houseTypes.forEach(function (element) {
                    element.addEventListener('click', calc)
                    })

However I have another set of options for House age. The HTML is:

  <form action="/action_page.php">
                                  <p style="font-size:20px" for="Age">What is the age of House?</p>
                                  <input type="radio" id="Pre 1945" name="Age" value="1" onclick="calc(event)" />
                                  <label style="font-size:15px" for="Pre 1945">Pre 1945</label><br>
                                  <input type="radio" id="1945-1965" name="Age" value="1" onclick="calc(event)" />
                                  <label style="font-size:15px" for="1945-1965">1945-1965</label><br>
                                  <input type="radio" id="1966-1999" name="Age" value="0.93" onclick="calc(event)" />
                                  <label style="font-size:15px" for="1966-1999">1966-1999</label><br>
                                  <input type="radio" id="2000-2009" name="Age" value="0.81" onclick="calc(event)" />
                                  <label style="font-size:15px" for="2000-2009">2000-2009</label><br>
                                  <input type="radio" id="2010 -" name="Age" value="0.8" onclick="calc(event)" />
                                  <label style="font-size:15px" for="2010 -">2010 -</label><br>
<p id="Age H"> House Type Here</p>

And I also want to do calculations with this set of user inputs as well. I have the JavaScript code as:

   function calc(event) {
                      var value = Number(event.target.value);
                      var agecoef= value*6.5;
                      document.getElementById("Age H").innerHTML = agecoef;
                    }
                    var houseTypes = document.querySelectorAll('input[name="Age"]')
                    houseTypes.forEach(function (element) {
                    element.addEventListener('click', calc)
                    })

However, when on the actual HTML, when I click on the age options, it also changes the house options to match the age value in the paragraph section.

Do you have those JS snippets just below each other? Then you’re overwriting both the houseTypes variable (which would probably better named houseAges anyway) and, more importantly, the calc() function; and because function declarations are getting hoisted, you’re passing the house age calculation function to both event listeners.

To fix this, put them in different scopes or just name them differently. Or, since both your snippets are doing pretty much the same thing, abstract the calculation away to a parameterized initialize function like e.g.:

function initCalc (name, outputId, factor) {
  var inputs = document.querySelectorAll('input[name="' + name + '"]')
  var output = document.getElementById(outputId)
  
  inputs.forEach(function (input) {
    input.addEventListener('click', function calc (event) {
      var value = Number(event.target.value) * factor
      output.textContent = value
    })
  })
}

initCalc('House Type', 'Type', 5.5)
initCalc('Age', 'Age H', 6.5)
1 Like