user6574190 user6574190 - 4 months ago 13
Javascript Question

How to use radio buttons to change variable values

I'm new to coding and am trying to use HTML5 & JavaScript to create an educational simulation with user input.

To limit input to sensible values I'd like to use 3 radio buttons to choose between Air, Water & Oil.

Each of these needs to be associated with a viscosity value & a density value which are used later on in the simulation. I've only seen so far how to use the "value" attribute of a radio button as its output, but seeing as I need two outputs tied to each button how could I acheive this (outputs are sent to two spans whose innerHTML are taken by

getElementById().innerHTML
later in the script.

<div class="radio">
<p><b>Fluid Type</b></p>
<form id="fluidForm">
<p>
<label>Air: <input type="radio" name="fluid" value="Air" /></label>
<label>Water: <input type="radio" name="fluid" value="Water" /></label>
<label>Oil: <input type="radio" name="fluid" value="Oil" /></label>
</p>
</form>

<span>Fluid viscosity:</span>
<span id="param3">4500</span>&nbsp;Pa s
<br/>
<span>Fluid density:</span>
<span id="param4">4500</span>&nbsp;kg/m^3 <!-- SI -->

<script>

document.getElementByName("fluid").addEventListener("change", radioChange);
document.getElementByNAme("fluid").addEventListener("click", radioChange);

function radioChange (){
if (document.getElementByName("fluid").value = "Air"){
document.getElementById("param3").innerHTML = 50;
document.getElementById("param4").innerHTML = 100;
};
if (document.getElementByName("fluid").value = "Water"){
document.getElementById("param3").innerHTML = 60;
document.getElementById("param4").innerHTML = 110;
};
if (document.getElementByName("fluid").value = "Oil"){
document.getElementById("param3").innerHTML = 70;
document.getElementById("param4").innerHTML = 120;
};
};

//and further down variables are called:

var viscosity = document.getElementById("param3").innerHTML;
var fdensity = document.getElementById("param4").innerHTML;

</script>


This doesn't seem to work, and seems to me (a total newbie) to be a blunt way of going about things anyway.

(The values inside the spans already are just place holders to let me know if it changes properly).

Huge thanks in advance for any help!

Answer

Your code will work after some changes :

  1. The getElementByName() function doesn't exist it should be getElementsByName() (note the s in Elements).

  2. You should loop through the list of nodes returned by getElementByName() and attach event to every node :

    var fluids = document.getElementsByName("fluid");
    for(var i=0;i<fluids.length;i++){
         fluids [i].addEventListener("change", radioChange);
         fluids [i].addEventListener("click", radioChange);
    }
    
  3. You have to define your variables in global scope and override them inside radioChange() method with new values.

  4. You have to use == of === when you want to compare instead of = that should be used for affectation purpose.

Hope this helps, check working example below.

var viscosity = document.getElementById("param3").innerHTML;
var fdensity = document.getElementById("param4").innerHTML;

// Attaching events HERE
var fluids = document.getElementsByName("fluid");
for(var i=0;i<fluids.length;i++){
  fluids[i].addEventListener("change", radioChange);
}

function radioChange (){
  var current_value = this.value;
  var param3 = document.getElementById("param3");
  var param4 = document.getElementById("param4");
  
  if (current_value == "Air"){
    param3.innerHTML = 50;
    param4.innerHTML = 100;
  };
  if (current_value == "Water"){
    param3.innerHTML = 60;   
    param4.innerHTML = 110;
  };
  if (current_value == "Oil"){
    param3.innerHTML = 70;
    param4.innerHTML = 120;
  };

  viscosity = param3.innerHTML;
  fdensity = param4.innerHTML;
};
<div class="radio">
  <p>
    <b>Fluid Type</b>
  </p>
  <form id="fluidForm">
    <p>
      <label>Air:   <input type="radio" name="fluid" value="Air"   /></label>
      <label>Water: <input type="radio" name="fluid" value="Water" /></label>
      <label>Oil:   <input type="radio" name="fluid" value="Oil"   /></label>
    </p>
  </form>

  <span>Fluid viscosity:</span>
  <span id="param3">4500</span>&nbsp;Pa s
  <br/>
  <span>Fluid density:</span>
  <span id="param4">4500</span>&nbsp;kg/m^3 <!-- SI -->
</div>