[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.
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)
})
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?
<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:
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)